Chapter 11: Standalone Components in Angular 20+

1. What Are Standalone Components?

Standalone components are Angular components that don’t require declaration inside an NgModule. They encapsulate their own dependencies via the imports property, enabling faster development and simpler app structure.

Key Benefits

• Less boilerplate by removing NgModules
• Easier lazy loading and routing setup
• Improved tree-shaking and bundle size
• More modular and composable architecture

2. Creating a Standalone Component

To create a standalone component, use the standalone: true flag in the @Component decorator:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule],
  template: `

Hello from Standalone Component!

This component does not belong to any NgModule.

` }) export class HelloComponent {}

3. Creating a Standalone Injectable Service

Services can also be standalone using providedIn: 'root' or any specific injector:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'  // App-wide singleton service
})
export class LoggerService {
  log(message: string): void {
    console.log('LoggerService:', message);
  }
}
  

4. Bootstrapping a Standalone Component

Instead of declaring components in NgModule, bootstrap your app directly with the standalone root component:

import { bootstrapApplication } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';

bootstrapApplication(HelloComponent)
  .catch(err => console.error(err));
  

5. Standalone Routing Setup

Routing also becomes simpler without modules. Define routes and provide RouterModule.forRoot() in your bootstrap providers:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

bootstrapApplication(HomeComponent, {
  providers: [provideRouter(routes)]
});
  

6. Standalone Component with Routing

Example of a standalone root component using RouterOutlet for navigation:

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [RouterModule],
  template: `

` }) export class RootComponent {}

7. Summary

• Standalone components reduce the need for NgModules.
• Services remain injectable with providedIn: 'root' or other injectors.
• Routing is configured via provideRouter and used inside standalone components.
• Bootstrapping happens directly with standalone components for simpler app startup.

Next Chapter Preview