Introduction to Angular NgModule Metadata Properties
An NgModule is a class marked by the @NgModule decorator. @NgModule identifies the module’s own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.
The @NgModule takes a metadata object that tells Angular how to compile and launch the application
The NgModule’s important metadata properties are as follows :
Metadata of NgModules:
- Declarations
- Exports
- Imports
- Bootstrap
- Providers
imports : A list of modules and it used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom made feature module
declarations : specify the components, directives and pipes that belong to the module.
exports : A subset of declarations that will be visible and usable in the other modules. A root module doesn’t have export option.
bootstrap : specify main application view, called the root component, which hosts all other app views. Only the root NgModule should set this bootstrap property.
providers : Specify the services, accessible across the app
An example of NgModule would look like below:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], exports:[ AppComponent ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Angular Built In Modules :
Angular has build in library modules starting with the @angular as prefix
- @angular/core
- @angular/router
- @angular/forms
- @angular/http
Built-In library and third party module can be installed using npm namager
Built-In modules, components, services, directives etc. can be imported by using built-in library modules.