At a high level, NgModules are a way to organize Angular apps\nand they accomplish this through the metadata in the @NgModule\ndecorator.\nThe metadata falls into three categories:
declarations array.providers array.imports and exports arrays.@NgModule metadatalinkThe following table summarizes the @NgModule metadata properties.
| \n Property\n | \n\n Description\n | \n
|---|---|
\n declarations\n | \n \n A list of declarable classes,\n(components, directives, and pipes) that belong to this module. \n
Components, directives, and pipes must belong to exactly one module.\nThe compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported\ndirectly or indirectly from another module. \n | \n
\n providers\n | \n \n A list of dependency-injection providers. \nAngular registers these providers with the NgModule's injector.\nIf it is the NgModule used for bootstrapping then it is the root injector. \nThese services become available for injection into any component, directive, pipe or service which is a child of this injector. \nA lazy-loaded module has its own injector which\nis typically a child of the application root injector. \n Lazy-loaded services are scoped to the lazy module's injector.\nIf a lazy-loaded module also provides the Components in external modules continue to receive the instance provided by their injectors. \nFor more information on injector hierarchy and scoping, see Providers and the DI Guide. \n | \n
\n imports\n | \n \n A list of modules which should be folded into this module. Folded means it is\nas if all the imported NgModule's exported properties were declared here. \nSpecifically, it is as if the list of modules whose exported components, directives, or pipes\nare referenced by the component templates were declared in this module. \n A component template can reference another component, directive, or pipe\nwhen the reference is declared in this module or if the imported module has exported it.\nFor example, a component can use the You can import many standard directives from the | \n
\n exports\n | \n \n A list of declarations—component, directive, and pipe classes—that\nan importing module can use. \n Exported declarations are the module's public API.\nA component in another module can use this\nmodule's Declarations are private by default.\nIf this module does not export Importing a module does not automatically re-export the imported module's imports.\nModule 'B' can't use A module can list another module among its Re-export makes module transitivity explicit.\nIf Module 'A' re-exports | \n
\n bootstrap\n | \n \n A list of components that are automatically bootstrapped. \nUsually there's only one component in this list, the root component of the application. \nAngular can launch with multiple bootstrap components,\neach with its own location in the host web page. \n A bootstrap component is automatically added to | \n
\n entryComponents\n | \n \n A list of components that can be dynamically loaded into the view. \n By default, an Angular app always has at least one entry component, the root component, Routed components are also entry components because they need to be loaded dynamically.\nThe router creates them and drops them into the DOM near a While the bootstrapped and routed components are entry components,\nyou don't have to add them to a module's Angular automatically adds components in the module's That leaves only components bootstrapped using one of the imperative techniques, such as Dynamic component loading is not common in most apps beyond the router. If you need to dynamically load components, you must add these components to the For more information, see Entry Components. \n | \n
You may also be interested in the following:
\n\n\n \n