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.

Mavlarn · Accepted Answer · 2017-04-13 11:05:26Z

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.

amansinghgusain · Accepted Answer · 2017-12-26 13:05:23Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related