Angular Standalone Components: Complete Migration Guide

Standalone components (stable since Angular 15) let you build Angular features without NgModules. They self-declare their own dependencies via the imports array, making code more readable and tree-shakeable.

Step 1 — Standalone Component Basics

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink }   from '@angular/router';
import { UserCardComponent } from './user-card.component';

@Component({
  selector:    'app-user-list',
  standalone:  true,                              // ← the key flag
  imports:     [CommonModule, RouterLink, UserCardComponent],
  templateUrl: './user-list.component.html',
})
export class UserListComponent { }

Step 2 — Bootstrap Without NgModule

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent }  from './app/app.component';
import { appConfig }     from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter }     from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes }            from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
  ],
};

Step 3 — Lazy Load Standalone Components

// app.routes.ts
export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(m => m.DashboardComponent),
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.adminRoutes),
  },
];

Step 4 — Migrate an Existing NgModule Component

// Before — declared in a module
@Component({ selector: 'app-widget', templateUrl: './widget.component.html' })
export class WidgetComponent { }

@NgModule({ declarations: [WidgetComponent], imports: [CommonModule] })
export class WidgetModule { }

// After — standalone
@Component({
  selector:   'app-widget',
  standalone: true,
  imports:    [CommonModule],
  templateUrl: './widget.component.html',
})
export class WidgetComponent { }
// NgModule can be deleted