An Angular module configures part of an application. It is a class with an @NgModule decorator, not the same thing as a JavaScript module. Every application has a root module that describes its startup configuration. Optional feature modules group related functionality so that a growing application is easier to manage. section 9.4.3 section 19.0
The root module commonly lives in app.module.ts. Its decorator can name the root component in bootstrap, register components in declarations, and load required modules through imports. A feature module uses the same decorator to describe one group of functionality, such as a data model, shared utilities, or an application interface. section 5.2.2 section 19.3
Use the decorator properties according to what the group needs:
- imports loads modules required by the classes in the feature module. section 19.3
- declarations lists its components, directives, and pipes; exports identifies which of those building blocks other modules can use. section 19.3 section 19.3.3
- providers registers services. Do not assume they remain private to the feature module: its services are combined with those of the root module and become available throughout the application. section 19.3
Start with a data-model module
A model.module.ts file can define ModelModule with @NgModule({ providers: [ProductRepository, StaticDataSource] }). It has no declarations because its job is to register services. As other features are added, import their modules into the root module rather than keeping every building block in one long root-module configuration. section 5.3.4 section 19.3 section 5.4.3
For a module containing components, declare the components it owns and export only those needed elsewhere. After moving component files into a module folder, update their import paths and replace outdated root-module references with an import of the new module. The result is a smaller root module and groups that can be changed with less disruption to other features. section 19.3.3
A feature module can also be loaded on demand. Put infrequently used administration features in a separate, self-contained module with its own required imports and child routes. Avoid dependencies on that module or its classes elsewhere in the application: such dependencies can cause its JavaScript to load even when the feature is unused. Browser network requests provide a practical check that navigation, rather than initial application load, fetches the administration files. section 7.0 section 7.1.1 section 7.1.3
Listing 7.5. The contents of the admin.module.ts file in the src/app/admin folder
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { AuthComponent } from "./auth.component";
import { AdminComponent } from "./admin.component";
let routing = RouterModule.forChild([
{ path: "auth", component: AuthComponent },
{ path: "main", component: AdminComponent },
{ path: "**", redirectTo: "auth" }
]);
@NgModule({
imports: [CommonModule, FormsModule, routing],
declarations: [AuthComponent, AdminComponent]
})
export class AdminModule { }
Inspect a self-contained administration module with CommonModule, FormsModule, child routes, and component declarations. section 7.1.1
