Angular Modules NgModule

What is Modules NgModule in Angular?

An NgModule groups related components, directives and pipes, declares what they can use, and exposes what other modules may import. It was the organising unit of Angular before standalone components.

Modules NgModule example

@NgModule({
  declarations: [AppComponent, JobCardComponent],   // what belongs to this module
  imports: [BrowserModule, HttpClientModule, FormsModule],  // what it needs
  providers: [ApiService],                          // services
  bootstrap: [AppComponent],                        // root component
})
export class AppModule {}

Key points to remember

• A component may be declared in exactly one NgModule.
• Feature modules plus lazy loading were the standard architecture before standalone.
• You still need to read NgModules to maintain existing applications.

The four arrays

Common mistakes with Modules NgModule

• Declaring the same component in two modules, which throws at compile time.
• Forgetting to export a component, so importing modules cannot use it.