? Standalone Routing

? Quick Overview

From Angular 15 onwards, you can build applications using standalone components and standalone routing, without creating any NgModule. Components declare their own dependencies via the imports array, and routing is configured using provideRouter() during bootstrap. This reduces boilerplate and makes apps easier to structure and scale.

? Key Concepts

• Standalone Components — Components that set standalone: true and don’t belong to a module.
• Local Imports — Each standalone component declares its dependencies in the imports array.
• Route Configuration — Routes are defined in a simple Routes array (e.g., app.routes.ts).
• provideRouter() — Registers routing at bootstrap time instead of via RouterModule.forRoot().
• bootstrapApplication() — New bootstrap API that replaces platformBrowserDynamic().bootstrapModule() in standalone apps.

? Syntax & Structure

To enable standalone routing, you typically work with three main pieces:

1. A standalone component (e.g., HomeComponent).
2. A routes definition file (e.g., app.routes.ts).
3. The bootstrap file (e.g., main.ts) that calls bootstrapApplication() with provideRouter(routes).

The following examples show how to create a standalone component and how to configure routing using the standalone APIs.

? Code Example 1 — Standalone Component

A simple HomeComponent that is fully standalone and ready for routing.

// Standalone HomeComponent with router support
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule],
  template: '<h2>Welcome to Home</h2>'
})
export class HomeComponent { }

?️ Code Example 2 — Standalone Routing Setup

Define your routes in app.routes.ts and then bootstrap the app with routing in main.ts.

// app.routes.ts — define routes using standalone components
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

// main.ts — bootstrap app and provide router
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app.routes';

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