Namespacing Pages Organization Help

Ionic Framework ionic-v3
1

Hi,

I am having a problem trying to organize my pages into logical namespaces.
I know this is more general Typescript (or Angular2) question.

Right now my pages are organized by folder. As example:

pages/
---- planes/
-------- create-plane.ts (w/ CreatePlanePage class)
-------- create-plane-confirmation.ts (w/ CreatePlaneConfirmationPage class)
-------- view-planes.ts (w/ ViewPlanesPage class)
---- cars/
-------- create-car.ts (w/ CreateCarPage class)
-------- create-car-confirmation.ts (w/ CreateCarConfirmationPage class)
-------- etc

Then on a HomePage I am importing each one of the those files to put on a menu (not using routing right now):

import {CreatePlanePage } from './planes/create-plane'
import {ViewPlanesPage } from './planes/view-planes'
import {CreateCarPage } from './cars/create-car'

Same thing more or less on the app-module.ts file.

I want to use namespaces to try to use my Page classes (and others) like this:

new Transportation.Planes.CreatePage()
new Transportation.Cars.CreatePage()
etc

** This is an oversimplification of what I want. I understand that CreatePage class is not a very good class name.

I did create a simple _planes.ts file with

export * from ‘./planes/create-plane’
export * from ‘./planes/view-planes’

and was able to import as follow in other places

import { CreatePlanePage, ViewPlanesPage } from ‘./_planes.ts’

My problem with both solutions is that the imports make the Pages global and forces you to have to have unique class names for each. Which is not desired is some areas.
Or you will need to rename them when you import, which defeats the purpose (in my opinion).

I’ve looked into the namespaces/modules documentation of typescript, but I have not been able to get it to work correctly.

When I wrap the classes into export namespace Transportation.Planes (with and without export) and try to import the two files somewhere I get transpiler exceptions. Transportation is already imported.
Using ///reference didn’t work either.

So, does anyone have a sample showing how you are structuring your app pages? Aside from folder-only structure.

Thank you,

2

Using a “renaming” style structure, but there has to be a better way using actual namespace/modules.

(names are for demonstration purpose only)

pages\planes\__namespaces.ts

import { CreatePage } from ‘./create’
import { ViewPage } from ‘./list’
import { ConfirmationPage } from ‘./confirmation’

export const Planes = {
CreatePage: CreatePage,
ViewPage: ViewPage,
ConfirmationPage: ConfirmationPage
}
//Similar for \pages\cars\__namespaces.ts

__namespaces.ts (in the src folder)

import { Planes } from ‘./pages/planes/__namespaces’
import { Cars } from ‘./pages/cars/__namespaces’

export const Pages = {
Planes: Planes,
Cars: Cars
}

Then on app.modules.ts, or HomePage, or any other page, I can do the following:

import { Pages } from ‘…/path_to_source…/__namespaces’
//Only 1 import
//Standard for anything that wants to use.

let myMenuItems = [
Pages.Planes.CreatePage,
Pages.Planes.ViewPage,
Pages.Cars.CreatePage
]