Angular Standalone Components: A Practical Migration Guide
How to migrate an existing NgModule-based Angular app to standalone components incrementally — the approach we used on a large codebase.
Standalone components are the recommended default. Here's the migration path we used — incrementally, without a big-bang rewrite.
What changes
Each component declares its own imports:
@Component({
standalone: true,
imports: [CommonModule, RouterLink],
template: `...`,
})
export class MyComponent {}
Strategy: leaves first
Start with leaf components: add standalone: true, move imports from the module onto the component, remove from declarations, add the component to the module's imports array.
Shared modules
Don't import a fat SharedModule into standalone components. Import only what you use — better tree-shaking and clearer dependencies.
Payoff
Our build times improved meaningfully after migration, and onboarding is faster because dependencies are explicit in each file.
Views0
Shared0