Angular 19 Routing Like a Pro: Signals + Routes + loadComponent + Fallbacks

Angular 19 doesn't just bring Signals and Standalone Components to the front—it revolutionizes routing too. It's cleaner, snappier, and finally feels like building a modern frontend app instead of configuring a Java EE application in 2007. In this guide, we'll explore a practical example that combines: ✅ Angular 19 Signals ✅ Route-based component loading with loadComponent() ✅ Nested children routes ✅ A wildcard fallback route (path: '') App Structure Here’s what we’re building: src/ app/ home.component.ts dashboard.component.ts profile.component.ts not-found.component.ts app.routes.ts main.ts Defining Routes with loadComponent() and children // app.routes.ts import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', loadComponent: () => import('./home.component').then(m => m.HomeComponent), }, { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent), children: [ { path: 'profile', loadComponent: () => import('./profile.component').then(m => m.ProfileComponent), }, ] }, { path: '', loadComponent: () => import('./not-found.component').then(m => m.NotFoundComponent), }, ]; Provide router // app.config.ts import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] }; Creating a Component: home.component.ts import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ selector: 'app-home', standalone: true, imports: [RouterModule], template: ` Welcome to Angular 19 Go to Dashboard ` }) export class HomeComponent { } Creating a Component: not-found.component.ts import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ selector: 'app-not-found', standalone: true, imports: [RouterModule], template: ` NotFoundComponent `, }) export class NotFoundComponent {} Creating a Component: profile.component.ts import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ selector: 'app-profile', standalone: true, imports: [RouterModule], template: ` ProfileComponent `, }) export class ProfileComponent {} Adding Signals (bonus reactive data!) import { Component, signal } from "@angular/core"; import { RouterModule } from "@angular/router"; @Component({ selector: "app-dashboard", standalone: true, imports: [RouterModule], template: ` Dashboard Clicks: {{ clicks() }} Click me `}) export class DashboardComponent { clicks = signal(0); } Summary Feature Purpose loadComponent() Lazy loads a standalone component children Defines nested routing within a parent path: '**' Catch-all fallback for 404s signal() Manages reactive state inside the component Final Thoughts Angular 19’s routing plus Signals makes it feel like you’re building with fine Italian UX pasta. Clean, modular, and reactive. Happy routing, and may your fallbacks always be graceful! ⚡

May 1, 2025 - 22:38

Angular 19 Routing Like a Pro: Signals + Routes + loadComponent + Fallbacks

Angular 19 doesn't just bring Signals and Standalone Components to the front—it revolutionizes routing too. It's cleaner, snappier, and finally feels like building a modern frontend app instead of configuring a Java EE application in 2007.

In this guide, we'll explore a practical example that combines:

✅ Angular 19 Signals
✅ Route-based component loading with loadComponent()
✅ Nested children routes
✅ A wildcard fallback route (path: '**')

App Structure

Here’s what we’re building:

src/
  app/
    home.component.ts
    dashboard.component.ts
    profile.component.ts
    not-found.component.ts
    app.routes.ts
    main.ts

Defining Routes with `loadComponent()` and `children`

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./home.component').then(m => m.HomeComponent),
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
    children: [
      {
        path: 'profile',
        loadComponent: () => import('./profile.component').then(m => m.ProfileComponent),
      },
    ]
  },
  {
    path: '**',
    loadComponent: () => import('./not-found.component').then(m => m.NotFoundComponent),
  },
];

Provide router

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

Creating a Component: `home.component.ts`

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

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule],
  template: `
  Welcome to Angular 19
  Go to Dashboard
  
`
})
export class HomeComponent {

}

Creating a Component: `not-found.component.ts`

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

@Component({
  selector: 'app-not-found',
  standalone: true,
  imports: [RouterModule],
  template: `
    NotFoundComponent
  `,
})
export class NotFoundComponent {}

Creating a Component: `profile.component.ts`

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

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [RouterModule],
  template: `
    ProfileComponent
  `,
})
export class ProfileComponent {}

Adding Signals (bonus reactive data!)

import { Component, signal } from "@angular/core";
import { RouterModule } from "@angular/router";

@Component({
  selector: "app-dashboard",
  standalone: true,
  imports: [RouterModule],
  template: `
    Dashboard
    Clicks: {{ clicks() }}
    
    
  `})
export class DashboardComponent {
  clicks = signal(0);

}

Summary

Feature	Purpose
`loadComponent()`	Lazy loads a standalone component
`children`	Defines nested routing within a parent
`path: '**'`	Catch-all fallback for 404s
`signal()`	Manages reactive state inside the component

Final Thoughts

Angular 19’s routing plus Signals makes it feel like you’re building with fine Italian UX pasta. Clean, modular, and reactive.

Happy routing, and may your fallbacks always be graceful! ⚡