Angular Modules help organize an application into cohesive blocks of functionality.

3. FormsModule
exports
(NgModel…)
CommonModule
exports
( NgIf , … )
My Components,
Directives & Pipes
Template Context@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...]
})
export class XxxModule{}
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
})
export class XxxModule{}
@NgModule({
declarations:[...],
imports :[...]
})
export class XxxModule{}
@NgModule({
declarations:[...]
})
export class XxxModule{}
@NgModule({
})
export class XxxModule{}

4. Application Injector
XxxModule
providers
RouterModule
providers
Lazy Loading
Boundary
Module Injector
MathModule
providers
UsersModule
providers
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
export class XxxModule{}
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
export class XxxModule{}
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
export class XxxModule{}
Platform
Injector

5. Lazy Loading
Boundary
App Module
Core
Module
Feature I
Module
Feature II
Module
Feature III
Module
Shared
Module
Shared
Module

6. Lazy Loading
Boundary
App Module
Core
Module
Feature I
Module
Feature II
Module
Feature III
Module
Shared
Module
Shared
Module

7. Lazy Loading
Boundary
App Module
Core
Module
Feature I
Module
Feature II
Module
Feature III
Module
Shared
Module
Shared
Module

8. @NgModule({
imports: [...],
declarations: [...],
exports: [...],
providers: [...]
})
export class CoreModule {
constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error('CoreModule is already loaded.');
}
}
static forRoot(config: UserServiceConfig): ModuleWithProviders {
return {
ngModule: CoreModule,
providers: [
{provide: UserServiceConfig, useValue: config }
]
};
}
}
Prevent
reimport
Configure
core services