An NgModule is defined as a class decorated with @NgModule. The @NgModule decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.
- declarations—The components, directives, and pipes that belong to this NgModule.
- exports—The subset of declarations that should be visible and usable in the component templates of other NgModules.
- imports—Other modules whose exported classes are needed by component templates declared in this NgModule.
- providers—Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)
- bootstrap—The main application view, called the root component, which hosts all other app views. Only the root NgModule should set this bootstrap property.
Here’s a simple root NgModule definition:
src/app/app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The export of AppComponent is just to show how to export; it isn’t actually necessary in this example. A root NgModule has no reason to export anything because other modules don’t need to import the root NgModule.