The @NgModule decorator attaches Angular module metadata to a class. Its configuration describes the application or feature module: required modules, declared components and directives, dependency-injection services, exported classes, and startup components. section 5.2.2 section 9.4.3
Use the decorator properties to connect Angular application parts:
- imports identifies Angular modules required by the module's components, directives, and pipes. section 19.2
- declarations identifies the components, directives, and pipes used within the module. section 5.2.2 section 19.2
- providers registers services for dependency injection. section 5.3.4
- exports makes selected classes available to other parts of the application. section 5.4.2
- bootstrap identifies the root component loaded during application startup. section 9.4.3 section 19.2
Root and feature modules
A root AppModule commonly declares AppComponent, imports BrowserModule, provides shared services, and bootstraps AppComponent. A SportsStore StoreModule instead imports ModelModule, BrowserModule, and FormsModule, declares StoreComponent, and exports it for use by the root module. section 5.2.2 section 5.4.2
Listing 5.9. The initial contents of the app.module.ts file in the src/app folder
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Inspect a complete minimal AppModule showing decorator imports, declarations, providers, and bootstrap configuration. section 5.2.2
Listing 5.17. The contents of the store.module.ts file in the src/app/store folder
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { ModelModule } from "../model/model.module";
import { StoreComponent } from "./store.component";
@NgModule({
imports: [ModelModule, BrowserModule, FormsModule],
declarations: [StoreComponent],
exports: [StoreComponent]
})
export class StoreModule { }
Compare a feature-module configuration that combines imports, declarations, and exports. section 5.4.2
