You need to learn to make use of modules.
I usually break the modules down into these types
- Layout modules
- Feature modules
- Core module (only 1)
- Shared module (only 1)
- App module (only 1)
Layout module is for laying out the app. For example a topbar module, a sidemenu module, a footer module, and a main content module.
Feature module. What exactly is this? There's really no clear definition, but whatever feature area you feel can be self contained in module, you might as well do it. You will import these feature modules into your layout modules, as the features are what make up the different layout components
Core module. Here you will export your layout modules, and all your core (singleton) services. You only need to export (and not import) the modules, as nothing in the core module will actually use those layout modules. You just export them so that the app module can use them. The core module will only be imported into the app module
Shared module. This is where you will declare all your shared pipes, directives, and components. Also you you can export commonly used modules like CommonModule
and FormsModule
. Other modules will be using the module
App module. You already know what this is. Out of your own created modules, the only ones you need to import are the shared and core modules.
Here's a basic layout
SharedModule
@NgModule({
declarations: [ HighlightDirective, SharedPipe, SharedComponent ],
exports: [
HighlightDirective, SharedPipe, SharedComponent,
CommonModule, FormsModule
]
})
class SharedModule {}
Layout Modules Notice other modules will use the SharedModule
@NgModule({
imports: [ FeatureAModule, FeatureBModule, SharedModule ]
declarations: [ TopbarComponent ],
exports: [ TopbarComponent ]
})
class TopbarModule {}
@NgModule({
imports: [ SharedModule ]
declarations: [ SidemenuComponent ],
exports: [ SidemenuComponent ]
})
class SidemenuModule {
static forRoot() { // pattern for adding app-wide services
return {
ngModule: SidemenuModule,
providers: [ MenuSelectionService ]
}
}
}
@NgModule({
imports: [ HomeModule, OtherModule, SharedModuel ]
declarations: [ MainContentComponent ],
exports: [ MainContentComponent ]
})
class MainContentModule {}
CoreModule Bring together all the layout modules that make up the application. And also add other app-wide services, that are not tied to other modules
@NgModule({
imports: [ SidemeuModule.forRoot() ]
exports: [ TopbarModule, SidemenuModule, MainContentModule ],
})
class CoreModule {
static forRoot() {
return {
ngModule: CoreModule,
providers: [ UserService, AuthService ]
}
}
}
AppModule
@NgModule({
imports: [
BrowserModule,
SharedModule,
CoreModule.forRoot(), // forRoot so we get all the providers
HttpModule,
RouterModule.forRoot(APP_ROUTES)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule {}
See Also: