NgModule Metadata

Go back to Tutorial

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.

Go back to Tutorial