Ionic2 how to organize code in several modules to gather in “app.module.ts”

Question

Following the ionic2 beginner's guide I have a "[my project]\\src\\app\\app.module.ts" looking like that:

    //Standard modules
    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import {Http} from '@angular/http';
     .... //possibly some more Standard modules


    ////Special Modules
    //module translate
    import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
    export function createTranslateLoader(http: Http) {
        return new TranslateStaticLoader(http, './assets/i18n', '.json');
    }


    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';

    //some custom component (graph elements I use in the pages)
    import { MyCustomGraph1Diagram } from '../custom-components/my-custom-graph-1/my-custom-graph-1';
    import { MyCustomGraph2Diagram } from '../custom-components/my-custom-graph-2/my-custom-graph-2';
...
    import { MyCustomGraphNDiagram } from '../custom-components/my-custom-graph-n/my-custom-graph-n';


    //my custom services
    import { MyService1 } from '../services/service-1/service-1';
...
    import { MyServiceN } from '../services/service-n/service-n';


    //my custom pipes
    import { MyPipe1 } from '../custom-pipes/pipe-1/pipe-1';
...
    import { MyPipeN } from '../custom-pipes/pipe-n/pipe-n';

    @NgModule({
      declarations: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
        MyCustomGraph1Diagram,
        ...
        MyCustomGraph2Diagram,
        MyPipe1,
        ....
        MyPipe1 
      ],
      imports: [
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [Http]})
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
      ],
      providers: [
        MyService1,
        ...
        MyService2
      ]
    })
    export class AppModule {}

I looks like it is going to become messy.

So I wonder if it is possible to have some sub-modules that would be called by "[my project]\\src\\app\\app.module.ts"

Something like that: under "[my project]\\src\\pages\\pages.module.ts":

    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';


    @NgModule({
      declarations: [
        MyPage1,
        ...
        MyPageN,
      ],
      imports: [
              ???
      ],
      bootstrap: [???],
      entryComponents: [
        MyPage1,
        ...
        MyPageN,
      ],
    })
    export class PagesModule {}

And so on for the others categories.

So I could break it in several *.module.ts file that would be all boot from the [my project]\\src\\app\\app.module.ts.

Answer 1

It is similar as it in Angular2. The difference is, for all modules, you should add IonicModule.forRoot(MyApp) . And export the module just as a IonicModule ， but not TodoModule . Like this modules:

import { NgModule }       from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyApp } from '../../app/app.component';
import { TodoListComponent }    from './list/list.component';
import { TodoDetailComponent }  from './detail/detail.component';

import { TodoService } from './todo.service';

@NgModule({
  imports:      [CommonModule, FormsModule, IonicModule.forRoot(MyApp)],
  declarations: [TodoListComponent, TodoDetailComponent],
  entryComponents:[TodoListComponent, TodoDetailComponent],
  providers:    [TodoService],
  exports:      [IonicModule]
})
export class TodoModule {}

I don't know what, in every modules, I need to add IonicModule.forRoot(MyApp) in imports.

Then, in your main module, just import this module as a normal module is ok.

Answer 2

IonicPageModule

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

Just import this new module in your main( app.module.ts ) module

...
IonicModule.forRoot(MyApp),
MyPageModule 
...

Ref: Ionic Page Module