At a high level, NgModules are a way to organize Angular applications and they accomplish this through the metadata in the @NgModule
decorator. The metadata falls into three categories:
Category | Details |
---|---|
Static | Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured using the declarations array. |
Runtime | Injector configuration using the providers array. |
Composability / Grouping | Bringing NgModules together and making them available using the imports and exports arrays. |
@NgModule({ // Static, that is compiler configuration declarations: [], // Configure the selectors // Runtime, or injector configuration providers: [], // Runtime injector configuration // Composability / Grouping imports: [], // composing NgModules together exports: [] // making NgModules available to other parts of the app })
@NgModule
metadataThe following table summarizes the @NgModule
metadata properties.
Property | Details |
---|---|
declarations | A list of declarable classes (components, directives, and pipes) that belong to this module.
|
providers | A list of dependency-injection providers. Angular registers these providers with the NgModule's injector. If it is the NgModule used for bootstrapping then it is the root injector. These services become available for injection into any component, directive, pipe or service which is a child of this injector. A lazy-loaded module has its own injector which is typically a child of the application root injector. Lazy-loaded services are scoped to the lazy module's injector. If a lazy-loaded module also provides the UserService , any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance provided by their injectors. For more information on injector hierarchy and scoping, see Providers and the DI Guide. |
imports | A list of modules which should be folded into this module. Folded means it is as if all the imported NgModule's exported properties were declared here. Specifically, it is as if the list of modules whose exported components, directives, or pipes are referenced by the component templates were declared in this module. A component template can reference another component, directive, or pipe when the reference is declared in this module or if the imported module has exported it. For example, a component can use the NgIf and NgFor directives only if the module has imported the Angular CommonModule (perhaps indirectly by importing BrowserModule ). You can import many standard directives from the CommonModule but some familiar directives belong to other modules. For example, you can use [(ngModel)] only after importing the Angular FormsModule . |
exports | A list of declarations —component, directive, and pipe classes— that an importing module can use. Exported declarations are the module's public API. A component in another module can use this module's UserComponent if it imports this module and this module exports UserComponent . Declarations are private by default. If this module does not export UserComponent , then only the components within this module can use UserComponent . Importing a module does not automatically re-export the imported module's imports. Module 'B' can't use ngIf just because it imported module 'A' which imported CommonModule . Module 'B' must import CommonModule itself. A module can list another module among its exports , in which case all of that module's public components, directives, and pipes are exported. Re-export makes module transitivity explicit. If Module 'A' re-exports CommonModule and Module 'B' imports Module 'A', Module 'B' components can use ngIf even though 'B' itself didn't import CommonModule . |
bootstrap | A list of components that are automatically bootstrapped. Usually there's only one component in this list, the root component of the application. Angular can launch with multiple bootstrap components, each with its own location in the host web page. |
You may also be interested in the following:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/ngmodule-api