Using Angular Standalone Components to Reduce NgModule Overhead

Why choose standalone components

Standalone components let you declare a component, its directives and pipes directly in the class file with the standalone: true flag. This removes the need for an NgModule wrapper, which can simplify the file structure and enable better tree‑shaking during builds.

Worked example: creating and bootstrapping a standalone component

1. Generate a new component with the standalone flag:

ng generate component hero-card --standalone

The command creates hero-card.component.ts containing:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-hero-card',
  standalone: true,
  imports: [CommonModule],
  template: `<div>{{ hero.name }}</div>`
})
export class HeroCardComponent {
  hero = { name: 'Windstorm' };
}

2. Bootstrap the component in main.ts using the standalone bootstrap API:

import { bootstrapApplication } from '@angular/platform-browser';
import { HeroCardComponent } from './app/hero-card/hero-card.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/routes';

bootstrapApplication(HeroCardComponent, {
  providers: [provideRouter(routes)]
});

3. Lazy‑load a route that uses the same standalone component:

const routes = [
  {
    path: 'hero',
    loadComponent: () =>
      import('./hero-card/hero-card.component').then(m => m.HeroCardComponent)
  }
];

When the application bundles, the Angular compiler treats HeroCardComponent as a self‑contained unit. No NgModule metadata is emitted, which allows the bundler to drop unused code more aggressively.

Limits and common mistakes

• Missing imports: If the component template uses *ngFor or *ngIf, you must include CommonModule (or FormsModule for ngModel) in the imports array. Forgetting this results in a runtime error like "Cannot read property 'forEach' of undefined".
• Provider conflicts: Standalone components cannot directly consume providers that are only declared inside an NgModule unless those providers are re‑exported from the module and imported into the standalone component’s providers array. Otherwise you may get unexpected null injections.
• Circular dependencies: Because each standalone file is treated as a separate module graph node, importing two standalone components that depend on each other creates a circular dependency that can break tree‑shaking. Keep the dependency graph acyclic or refactor shared logic into a third standalone file.
• Version requirement: Standalone components were introduced in Angular 14. Projects using earlier versions must upgrade before using the standalone: true flag.

Verification steps

1. Run the generation command and inspect the generated file:

ng generate component demo --standalone
cat src/app/demo/demo.component.ts

Confirm the metadata includes standalone: true and an imports array.

2. Build the application for production and examine the bundle:

ng build --configuration production
source-map-explorer dist/*/main*.js

Look for the absence of NgModule wrapper code around the component’s class definition and verify that the component’s code appears in the bundle only when the route that uses it is loaded.