The document discusses Angular modules and NgModules. It shows different types of NgModule declarations including components, directives, and pipes. It also shows the different NgModule metadata properties like imports, exports, declarations, and providers. It demonstrates how modules can import and export declarations and how modules are loaded within the application injector.

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