An Angular module, or NgModule, is a class-based application unit that groups Angular building blocks and makes them work together. In module-based applications, NgModules organize declarations, imports, providers, exports, and application bootstrap; before Angular v14, they were the required architectural glue. section 1.2.1 section 2.1.1
NgModules can obscure a component’s real dependencies. A parent may render a child component without importing it directly; instead, both are declared in a module, and cross-module use can require exports through feature or shared modules. Providers can likewise be placed in a module, although newer applications often use providedIn: 'root' or standalone provider APIs. section 2.1.2 section 2.1.3
Employee feature module
An HRMS employee list renders employee tiles, while EmployeeModule declares both EmployeeListComponent and EmployeeComponent. This arrangement lets the template work, but hides the child-component relationship from the parent file’s imports. section 2.1.2
Listing 2.2 AppModule
@NgModule({
declarations: [
AppComponent,
],
imports: [
CommonModule,
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
The AppModule listing shows the central NgModule pattern: declare the root component, import dependencies, register providers, and bootstrap AppComponent. section 2.1.1
NgModules remain supported, but standalone APIs provide a gradual alternative:
- Mix standalone components, directives, and pipes with existing NgModules; neither style requires an immediate all-at-once rewrite. section 2.1
- For manual migration, convert declarables incrementally, move them from declarations to imports, then remove modules until AppModule can be replaced with standalone providers in main.ts. section 2.5.1
- In Angular v16, run ng g @angular/core:standalone in order: convert declarables, remove unnecessary NgModules, then switch bootstrap to standalone APIs; test after each step. section 2.5.3
