SignalsRoutesloadComponentFallbacks

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! ⚡