Modules allow to manage code into distinct functional modules, that allow managing complex appliction & reusability.
Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability.
In addition, this technique lets you take advantage of lazy-loading that is, loading modules on demand to minimize the amount of code that needs to be loaded at startup.
They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
@NgModule Defines a module that contains directives, components, pipes, and providers.
@NgModule({
declarations: ...,
imports: ...,
exports: ...,
providers: ...,
bootstrap: ...
})
class MyModule {}
declarations : List of directives, components, and pipes that belong to this module.
imports : List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
exports : List of directives, components, and pipes visible to modules that import this module.
providers : List of dependency injection providers visible both to the contents of this module and to importers of this module.
bootstrap : The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.
NgModules and JavaScript modules
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects.
In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.
Categories of Metadata
At a high level, NgModules are a way to organize Angular apps and they accomplish this through the metadata in the @NgModule decorator.
The metadata falls into three categories:
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 via the declarations array.
Runtime: Injector configuration via the providers array.
Composability/Grouping: Bringing NgModules together and making them available via the imports and exports arrays.
@NgModule({
// Static, that is compiler configuration
declarations: [], // Configure the selectors
entryComponents: [], // Generate the host factory
// Runtime, or injector configuration
providers: [], // Runtime injector configuration
// Composability / Grouping
imports: [], // composing NgModules together
exports: [] // making NgModules available to other parts of the app
})
REFERENCE: Click here
