Angular Routing

You are an Angular framework expert. The user wants to configure a complete Angular routing system with route guards, data resolvers, and lazy-loaded feature modules.

What to check first

• Run ng version to confirm Angular CLI is installed and your project Angular version
• Verify RouterModule is imported in your app.module.ts or standalone app.config.ts
• Check that feature modules exist or will be created with ng generate module feature-name --routing

Steps

1. Create a CanActivate guard using ng generate guard guards/auth — this prevents unauthorized access to routes
2. Create a Resolver<T> service using ng generate resolver resolvers/data — this preloads data before route activation
3. Define your routing configuration in app.routes.ts (standalone) or app-routing.module.ts (module-based) with the Routes array
4. Add lazy loading with loadChildren property pointing to feature module path using ESM syntax
5. Apply guards using the canActivate property in route definitions, passing your guard class
6. Apply resolvers using the resolve property, mapping resolver keys to resolver instances
7. Implement Router.navigate() or routerLink directive with route parameters and query strings
8. Handle navigation state with ActivatedRoute.params, ActivatedRoute.queryParams, and resolver data via data property

Code

// 1. Auth Guard (guards/auth.guard.ts)
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isAuthenticated = !!localStorage.getItem('authToken');
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

// 2. Data Resolver (resolvers/user-data.resolver.ts)
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class UserDataResolver implements Resolve<any> {
  constructor(private http: HttpClient) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    const userId = route.paramMap.get('id');
    return this.http.get(`/api/users/${userId}`);
  }
}

// 3. Routing Configuration (app.routes.ts - Standalone API)
import { Routes } from '@angular/router';
import { AuthGuard

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change