Angular Standalone Components: Complete Migration Guide from NgModules

Admin

04-01-2026, 05:44 PM #1

Angular Standalone Components eliminate the need for NgModules and simplify your application architecture. This guide walks you through migrating an existing Angular app from NgModules to standalone components.

What Are Standalone Components?

Standalone components are self-contained components that declare their own dependencies directly, without needing an NgModule. They were introduced in Angular 14 as developer preview and became stable in Angular 15.

Creating a Standalone Component

Code:

@Component({

  selector: 'app-header',

  standalone: true,

  imports: [CommonModule, RouterModule],

  template: `

    <nav>

      <a routerLink="/home">Home</a>

      <a routerLink="/about">About</a>

    </nav>

  `

})

export class HeaderComponent {}

The key difference is the standalone: true flag and the imports array directly on the component decorator.

Bootstrapping Without AppModule

Instead of bootstrapping with a module, you can now bootstrap directly with a component:

Code:

// main.ts

import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app/app.component';

import { provideRouter } from '@angular/router';

import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {

  providers: [

    provideRouter(routes),

    provideHttpClient(),

  ]

});

Step-by-Step Migration Process

1. Update Angular to version 15 or later
2. Run the Angular CLI migration schematic:

Code:

ng generate @angular/core:standalone

3. Choose the migration mode: convert components, remove modules, or bootstrap
4. Review and test each changed file
5. Remove empty NgModule files

Handling Shared Modules

If you had a SharedModule, you can either:
- Make each shared component standalone and import them individually
- Keep the SharedModule temporarily and import it in standalone components

Code:

// Before: SharedModule approach

@NgModule({

  declarations: [ButtonComponent, CardComponent],

  exports: [ButtonComponent, CardComponent]

})

export class SharedModule {}

// After: Each component is standalone

@Component({

  standalone: true,

  selector: 'app-button',

  template: `<button><ng-content></ng-content></button>`

})

export class ButtonComponent {}

Lazy Loading with Standalone Components

Code:

export const routes: Routes = [

  {

    path: 'dashboard',

    loadComponent: () => import('./dashboard/dashboard.component')

      .then(m => m.DashboardComponent)

  }

];

Common Migration Pitfalls

- Forgetting to add CommonModule to imports for *ngIf, *ngFor directives
- Not providing services at the correct level
- Missing route configurations when removing AppRoutingModule
- Circular dependency issues between standalone components

Benefits of Standalone Components

- Reduced boilerplate code
- Better tree-shaking and smaller bundle sizes
- Clearer dependency management
- Simplified lazy loading
- Easier to understand for new developers

Have you migrated your project to standalone components? Share your experience!

Reply

Print Thread

0 Vote(s) - 0 Average

Recently Browsing
1 Guest(s)