Angular Standalone Components

Angular Standalone Components

Build module-free Angular apps with standalone: true, bootstrapApplication, and lazy-loaded standalone routes

When to Use

• Starting a new Angular 17+ application (standalone is the default and recommended approach)
• Migrating from NgModule-based apps to reduce boilerplate and improve tree-shaking
• Adding lazy-loaded feature routes without creating a dedicated NgModule
• Publishing a reusable component library that consumers can import without module ceremony

Instructions

1. Set standalone: true in the @Component, @Directive, or @Pipe decorator. Standalone components declare their own dependencies in the imports array instead of through a module.
2. List every dependency the template uses in the imports array: other standalone components, directives, pipes, and Angular built-ins like NgIf, NgFor, AsyncPipe, RouterLink, ReactiveFormsModule.
3. Bootstrap the app with bootstrapApplication(AppComponent, appConfig) in main.ts. Move all providers (provideRouter, provideHttpClient, provideAnimations) into the appConfig object.
4. Configure routing with provideRouter(routes). Use loadComponent for lazy-loaded standalone components and loadChildren for lazy feature route arrays.
5. Import CommonModule only as a last resort when migrating. Prefer importing individual directives (NgIf, NgFor, AsyncPipe) for better tree-shaking.
6. Share providers across a lazy route group by using the providers array on a route object — this creates a scoped injector for that route subtree.
7. Run ng generate component --standalone (or set standalone: true as the default in angular.json schematics) to generate standalone components by default.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
import { authInterceptor } from './app/auth.interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideAnimations(),
  ],
});

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent),
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then((m) => m.ADMIN_ROUTES),
    // providers scoped to this route subtree
    providers: [AdminStateService],
  },
];

// A standalone component
import { Component } from '@angular/core';
import { NgFor, AsyncPipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { ProductCardComponent } from '../product-card/product-card.component';

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [NgFor, AsyncPipe, RouterLink, ProductCardComponent],
  template: `
    <app-product-card
      *ngFor="let p of products$ | async"
      [product]="p"
      [routerLink]="['/product', p.id]"
    />
  `,
})
export class ProductListComponent { ... }

Details

Why standalone over NgModules: NgModules were a layer of indirection that required declaring, exporting, and importing components in multiple places. Standalone components are self-describing — the imports array is the entire dependency manifest. This makes the component portable, tree-shakeable, and easier to test (no TestBed.configureTestingModule module imports needed, just the component itself).

provideRouter features: The functional router API supports feature flags as composable functions:

provideRouter(
  routes,
  withDebugTracing(), // logs route events to console
  withPreloading(PreloadAllModules),
  withComponentInputBinding(), // binds route params to @Input()
  withViewTransitions() // enables View Transitions API
);

withComponentInputBinding: Enables binding route params, query params, and data directly to component inputs without injecting ActivatedRoute. The route param id maps to @Input() id: string.

Migrating from NgModules: Use the Angular CLI migration: ng generate @angular/core:standalone. It runs in three passes: convert declarations to standalone, remove unnecessary NgModules, switch the bootstrap call.

Scoped providers on routes: When a provider is listed in a route's providers array, it creates an Environment Injector scoped to that route. Services provided here are singletons within the lazy subtree but destroyed when the route is unloaded. This replaces the forRoot()/forChild() pattern from modules.

Testing standalone components:

await TestBed.configureTestingModule({
  imports: [ProductListComponent], // import, not declare
}).compileComponents();

Source

https://angular.dev/guide/components/importing

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.