How To Use NgModule and Metadata in angular
The @NgModule decorator identifies AppModule as NgModule class.
The @NgModule takes a metadata object that tells Angular how to compile and start the application.
The important metadata properties of NgModule are the following:-
providers
declarations
imports
exports
entry Components
bootstrap
schemas
id
The @NgModule class with the decorator and metadata properties –
@NgModule({
providers?: Provider[ ]
declarations?: Array<Type<any> | any[]>
imports?: Array<Type<any> | ModuleWithProviders | any[]>
exports?: Array<Type<any> | any[]>
entryComponents?: Array<Type<any> | any[]>
bootstrap?: Array<Type<any> | any[]>
schemas?: Array<SchemaMetadata | any[]>
id?: string
})
Let understand in detail about NgModule metadata is as follows-
1. Providers: It contains the list of dependency injection (DI) and it also defines the set of injectable objects that are available in the injector of this module.
2. Declarations: It contains list of declarable classes, components, directives, and pipes that belong to this module. The compiler throws an error when you try to declare the same class in multiple modules.
3. Imports: It contains the list of modules and it is used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom functionality module.
4. Exports: It contains the list of declarable components, directives, pipes, and modules that an import module can use within a template of any component.
5. EntryComponents: It contains list of components that must be compiled when this module is defined. By default, an Angular application always has atleast one entry component, the root component i.e. AppComponent.
6. A bootstrapped component is an entry component that Angular loads into the DOM during application launch and other root components dynamically loaded into the entry components.
7. Bootstrap: A list of components that automatically start and the listed components will be added automatically to entryComponents.
8. Schemas: Defines a schema that will allow non-angular elements and properties.
9. Id: The Id is used to identify the modules in getModuleFactory. If not defined, the NgModule is not registered with getModuleFactory.
Why use multiple NgModules
Ans. Multiple NgModules provides some important benefits. In fact, the modules help you to organize an application into associative blocks of functionality.
Firstly, we have to organize the application code. If you put many resource files in the default app module and see the happing. And the second is – It opens the possibility of lazy loading through the router.
What Are the Purpose of @NgModule ?
NgModule is used to simplify the ways of defining and managing the dependencies in the applications
and you can also consolidate different components and services in cohesive blocks of functionality.
The @NgModule metadata is divided into 3 categories as follows:
Static
Runtime
Composability/Grouping
Static: It is a compiler configuration and configured through the declarations array. Runtime: It is injector configuration and configured through the provider’s array.
Composability/Grouping: Introducing NgModules together and configured via the imports and exports arrays.
Types of NgModules?
There are 5 types of NgModules:
Feature Module
Routing Module
Service Module
Widget Module
Shared Module
Feature Module: The feature module are NgModules to organize an application code.
Routing Module: Routing is used to manage routes and also allows navigation from one view to another view while users perform application tasks.
Service Module: Modules that contain only services and providers. It provides utility services such as data access and messaging. The root AppModule is the only module that needs to import service modules. The HttpClientModule is a good example of a service module.
Widget Module: It is a third party UI component libraries .
Shared Module: It allows us to organize the application code. You can put frequently used components, directives, and pipes in a module and use whenever required
You May Also Like This
Lazy Loading in Angular in Hindi | Angular Modules | Types of Modules loading
