In a module-based Angular application, the root module describes the application to Angular. It is conventionally an AppModule class in src/app/app.module.ts. The class can be empty: its @NgModule decorator supplies the configuration. A root module is distinct from optional feature modules, which group related functionality. section 5.2.2 section 19.2
Four @NgModule properties do the main configuration work:
- imports identifies Angular modules needed by the application, such as BrowserModule or a feature module. section 19.2
- declarations identifies application components, directives, and pipes. section 19.2
- providers identifies services available through dependency injection. section 19.2
- bootstrap identifies the root component or components to load at startup. section 19.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 { }
A minimal AppModule declares and bootstraps AppComponent, imports BrowserModule, and leaves providers empty. Its class needs no members. section 5.2.2
Startup connects this configuration to the runtime: src/main.ts creates the browser platform and calls bootstrapModule(AppModule). A TypeScript import makes AppModule available to that file; the @NgModule imports property instead lists Angular modules the application requires. section 9.4.2 section 9.4.3
Adding a store interface
Add StoreModule to AppModule’s imports, then place <store></store> in the root component’s template. Angular can load the feature module and display its store component without putting that component in the root module’s declarations. section 5.4.3
The bootstrap list need not contain only one component: a product interface can bootstrap table, form, and message components, with matching elements in the HTML page. A later routing setup can instead import routing configuration and bootstrap a new AppComponent. Angular also supports applications without modules through standalone components; the root-module pattern applies to module-based applications. section 20.5 section 24.2.3 section 19.2
