@NgModule
@NgModule
NgModule configures the injector and the compiler and help organize related things together.
Example
The CLI generates the following basic app module when creating a new app.
@NgModule({
declarations: [
AppComponent,
ItemDirective
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Options
bootstrap#
bootstrap?: Array<Type<any>|any[]>The set of components that are bootstrapped when
this module is bootstrapped. The components listed here
are automatically added to entryComponents.
declarations#
declarations?: Array<Type<any>|any[]>The set of components, directives, and pipes (declarables) that belong to this module.
The set of selectors that are available to a template include those declared here, and those that are exported from imported NgModules.
Example
The following example allows the CommonModule to use the NgFor
directive.
@NgModule({
declarations: [NgFor]
})
class CommonModule {
}
entryComponents#
entryComponents?: Array<Type<any>|any[]>The set of components to compile when this NgModule is defined,
so that they can be dynamically loaded into the view.
For each component listed here, Angular creates a ComponentFactory
and stores it in the ComponentFactoryResolver.
Angular automatically adds components in the module's bootstrap
and route definitions into the entryComponents list. Use this
option to add components that are bootstrapped
using one of the imperative techniques, such as ViewContainerRef.createComponent() or with ngComponentOutlet directive.
exports#
exports?: Array<Type<any>|any[]>The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API.
A declarable belongs to one and only one NgModule.
A module can list another module among its exports, in which case all of that module's
public declaration are exported.
Declarations are private by default.
If this ModuleA does not export UserComponent, then only the components within this
ModuleA can use UserComponent.
ModuleA can import ModuleB and also export it, making exports from ModuleB
available to an NgModule that imports ModuleA.
Example
The following example exports the NgFor directive from CommonModule.
@NgModule({
exports: [NgFor]
})
class CommonModule {
}
id#
id?: stringA name or path that uniquely identifies this NgModule in getModuleFactory.
If left undefined, the NgModule is not registered with getModuleFactory.
imports#
imports?: Array<Type<any>|ModuleWithProviders<{}>|any[]>The set of NgModules whose exported declarables are available to templates in this module.
A template can use exported declarables from any
imported module, including those from modules that are imported indirectly
and re-exported.
For example, ModuleA imports ModuleB, and also exports
it, which makes the declarables from ModuleB available
wherever ModuleA is imported.
Example
The following example allows MainModule to use anthing exported by
CommonModule:
@NgModule({
imports: [CommonModule]
})
class MainModule {
}
jit#
jit?: trueIf true, this module will be skipped by the AOT compiler and so will always be compiled using JIT.
This exists to support future Ivy work and has no effect currently.
providers#
providers?: Provider[]The set of injectable objects that are available in the injector of this module.
Dependencies whose providers are listed here become available for injection
into any component, directive, pipe or service that is a child of this injector.
The NgModule used for bootstrapping uses the root injector, and can provide dependencies
to any part of the app.
Example
The following example defines a class that is injected in
the HelloWorld NgModule:
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
}
@NgModule({
providers: [
Greeter
]
})
class HelloWorld {
greeter:Greeter;
constructor(greeter:Greeter) {
this.greeter = greeter;
}
}
schemas#
schemas?: Array<SchemaMetadata|any[]>The set of schemas that declare elements to be allowed in the NgModule.
Elements and properties that are neither Angular components nor directives
must be declared in a schema.
Allowed value are NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA.
When using one of NO_ERRORS_SCHEMA or CUSTOM_ELEMENTS_SCHEMA
you must ensure that allowed elements and properties securely escape inputs.