How to separate app.module into smaller files?

Question

I'm learning Ionic 3, Angular 4 and ngrx design pattern.

I have a working application but with my app.module.ts looking like this (omitting the imports):

@NgModule({
    declarations: [MyApp, ModelOnePage, ModelTwoPage ],
    imports: [
        IonicModule.forRoot(MyApp),
        StoreModule.provideStore({ modelOne: ModelOneReducer, modelTwo: ModelTwoReducer }),
        EffectsModule.run(ModelOneEffects),
        EffectsModule.run(ModelTwoEffects),
    ],
    bootstrap [IonicApp],
    entryComponents: [MyApp, ModelOnePage, ModelTwoPage ],
    providers: [ModelOneActions, ModelOneService, 
                ModelTwoActions, ModelTwoService, 'andSomeIonicStuff']
})
export class AppModule { }

However I would like to have separate .module files such as a modelOne.module.ts :

@NgModule({
    declarations: [ ModelOnePage ],
    imports: [
        IonicPageModule.forChield(ModelOnePage),
        StoreModule.provideStore({ modelOne: ModelOneReducer }),
        EffectsModule.run(ModelOneEffects),
    ],
    //bootstrap [?],
    entryComponents: [ ModelOnePage ],
    providers: [ModelOneActions, ModelOneService ]
})
export class ModelOneModule { }

And so on, with each model/page having its own.

I'm asking because having a gigantic file with everything is clearly horrible for structure. Also managing git conflicts and merges when multiple people are working in the same project doing different parts and having to modify the same file is not ideal.

So far I got this working for the pages bit, implementing the lazy loading strategy, but the imports for StoreModule and EffectsModule and the providers do not work.

I'd like to know if there is a way to achieve what I'm trying to do. If there is not, then why is it? Which part of the stack is at fault ? (ngrx-plugin, angular4, ionic3...)

Answer 1

Just separate your app.module.ts, import new one to the main.ts and bootstrap it

Also this question may brings you new ideas