Ionic2 как организовать код в нескольких модулях для сбора в «app.module.ts»

Question

После руководства для новичка ionic2 у меня есть «[мой проект] \ src \ app \ app.module.ts», который выглядит так:

//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 {} 

Похоже, что это станет грязным.

Так интересно, если это возможно, чтобы иметь некоторые суб-модулей, которые будут вызываться «[мой проект] \ SRC \ приложение \ app.module.ts»

Нечто подобное: под «[ мой проект] \ SRC \ страницы \ 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 {} 

И так далее для других категорий.

Так что я мог бы разбить его в нескольких файлах * .module.ts, которые будут загружаться из [моего проекта] \ src \ app \ app.module.ts.

Answer 1

Как и в Angular2. Разница в том, что для всех модулей вы должны добавить IonicModule.forRoot(MyApp). И экспортируйте модуль так же, как IonicModule, но не TodoModule. Как это модули:

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 {} 

Я не знаю, что, в каждом модулей, мне нужно добавить IonicModule.forRoot(MyApp) импорта.

Затем, в вашем основном модуле, просто импортируйте этот модуль, как обычный модуль, в порядке.

Answer 2

IonicPageModule

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

Просто импортировать этот новый модуль в основном (app.module.ts) Модуль

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

Ref: Ionic Page Module