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: `
  <h1>Welcome to Angular 19</h1>
  <a routerLink="/dashboard">Go to Dashboard</a>
  <router-outlet></router-outlet>
`
})
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: `
    <h1>NotFoundComponent</h1>
  `,
})
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: `
    <h1>ProfileComponent</h1>
  `,
})
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: `
    <h2>Dashboard</h2>
    <p>Clicks: {{ clicks() }}</p>
    <button (click)="clicks.set(clicks() + 1)">Click me</button>
    <router-outlet></router-outlet>
  `})
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! ⚡