Angular standalone components

Introduced in v14, standalone components are a new simplified way to construct Angular applications. It is optional but, since Angular 17, new applications generated with the angular cli are using standalone components by default.

What are standalone components

A standalone component is a component that is not part of any ngModule.

Until recently, every Angular components had to be declared and attached to a ngModule to be usable.

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AnotherModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now, as the name implied, components can live on their own and we can get rid of all the ngModule code. Note the standalone: true property in the component decorator.

@Component({
	selector: 'app-root'
	standalone: true,
	imports: [CommonModule, AnotherComponent], 
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss']
})
export class AppComponent {}

The main advantage of using standalone component is to make the components creation simpler and to remove a lot of boilerplate code that was tightly tied to the ngModule. The components are not anymore tied to a specific module and can therefore be used in any part of the application.

Beside standalone components, it is also possible to create standalone directives and standalone pipes.

Should you use standalone components?

Yes! Standalone components is now the recommended way to create your Angular components. Standalone components can live in existing projects relying on ngModule. New components should be created as standalone if you are not ready yet to migrate your existing base code.

Standalone components can be used to bootstrap your app. Routing, Child routes and Lazy loading features are still available. I invite you to check the Angular documentation.