AI Reading

Quick summary of this article

Angular 20 introduces standalone components, which allow developers to build applications without the traditional NgModules, simplifying the overall architecture. These components manage their own dependencies through an imports property, leading to less boilerplate, easier lazy loading, and a more modular design. This tutorial explains how to create standalone components, services, and routing, as well as how to bootstrap an app directly from a root component.

Standalone components use a standalone: true flag and list their own dependencies in an imports array, eliminating the need for NgModule declarations.
Services can be made standalone and app-wide by using providedIn: 'root' in the @Injectable decorator.
Apps are bootstrapped directly with a root standalone component using bootstrapApplication(), removing the need for a module-based startup.
Routing is simplified by using provideRouter(routes) in the bootstrap providers, and standalone components can use RouterModule for navigation links and outlets.
Key benefits include reduced boilerplate code, easier lazy loading, improved tree-shaking, and a more composable application structure.

Chapter 11: Standalone Components in Angular 20+

Angular 20 introduces powerful standalone APIs that simplify application architecture by removing the need for NgModules. This chapter covers what standalone components are, how to create them, and how to manage routing and services in a standalone environment.

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

Chapter 12 will dive into State Management with Angular’s reactive patterns, including RxJS Subjects, BehaviorSubjects, and an introduction to NgRx & Angular Signals.

Angular 20 Standalone Components Tutorial – Build Angular Apps Without NgModules