🌐 Angular Routing Advanced – Guards, Lazy Loading & Dynamic Routes

(Routing wie ein Profi: Sicher, performant und flexibel)

Routing ist mehr als path und component.
In Angular kannst du mit Guards, Lazy Loading und dynamischen Parametern
eine Routing-Architektur aufbauen, die skaliert und sicher ist.

1️⃣ Route Guards – Schutz für deine Routen

canActivate: [AuthGuard]

✅ Schütze Seiten, die Login, Rollen oder Berechtigungen brauchen.

2️⃣ Lazy Loading – Performance durch Modul-Splits

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.routes').then(m => m.routes)
}

✅ Reduziert Initial Load und verbessert die Time to Interactive

3️⃣ Dynamische Routen mit Parametern

{ path: 'blog/:slug', component: BlogDetailComponent }

const slug = this.route.snapshot.paramMap.get('slug');

✅ Ideal für CMS-Inhalte, Datenansichten & mehr

4️⃣ Guards kombinieren & steuern

{
  path: 'checkout',
  canActivate: [isLoggedInGuard, hasProductsGuard],
}

✅ Mehr Kontrolle durch Chain-Logic & Service-Driven Guards

5️⃣ Resolver für Pre-Loading

resolve: { product: ProductResolver }

✅ Hole Daten vor dem Routing, statt mit ngOnInit – besser für UX

Bonus: Signals + Router Integration (ab Angular 17+)

import { inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';

const route = inject(ActivatedRoute);
const params = toSignal(route.paramMap);

✅ Native Signal-Unterstützung für Routing ab Angular 17+!

Fazit

Routing richtig gemacht bedeutet:

• Schnelligkeit durch Lazy Loading
• Sicherheit mit Guards
• Klarheit durch strukturierte Routen

👉 Nächster Beitrag:
📦 Angular Directives Deep Dive – Struktur, Verhalten & Best Practices