700-angular-routing

Angular Routing Best Practices

• Standalone Component Routing: Use the standalone component routing APIs.

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

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
  {
    path: 'admin',
    canActivate: [() => inject(AuthService).isAdmin()],
    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES)
  },
  { path: '**', component: NotFoundComponent }
];

• Lazy Loading: Use lazy loading for feature routes to improve initial load performance.

// In app.routes.ts
{
  path: 'products',
  loadChildren: () => import('./products/product.routes')
    .then(m => m.PRODUCT_ROUTES)
},

// In products/product.routes.ts
export const PRODUCT_ROUTES: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent }
];

• Component Input Binding: Use component input binding to map route parameters directly to component inputs.

// In app.config.ts
import { provideRouter, withComponentInputBinding } from '@angular/router';

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

// In user-detail.component.ts
@Component({
  selector: 'app-user-detail',
  standalone: true,
  template: '...'
})
export class UserDetailComponent {
  // This will automatically receive the value from route parameter 'id'
  id = input<string>('');
  
  user = signal<User | null>(null);
  
  constructor(private userService: UserService) {
    effect(() => {
      const userId = this.id();
      if (userId) {
        this.loadUser(userId);
      }
    });
  }
  
  private loadUser(id: string): void {
    this.userService.getUser(id).subscribe(user => {
      this.user.set(user);
    });
  }
}

• Route Guards: Use functional route guards instead of class-based guards when possible.

// auth.guard.ts
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isLoggedIn()) {
    return true;
  }
  
  // Redirect to login page with return url
  return router.parseUrl('/login?returnUrl=' + router.url);
};

// Usage in routes
{
  path: 'profile',
  component: ProfileComponent,
  canActivate: [authGuard]
}

• Route Resolvers: Use route resolvers to pre-fetch data before activating a route.

// products.resolver.ts
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { ProductService } from './product.service';
import { Product } from './product.model';

export const productsResolver: ResolveFn<Product[]> = () => {
  return inject(ProductService).getProducts();
};

// In routes
{
  path: 'products',
  component: ProductListComponent,
  resolve: { products: productsResolver }
}

// In component
export class ProductListComponent {
  products = input<Product[]>([]);
  // With component input binding enabled, the resolver data is automatically 
  // bound to the input above
}

• Route Data: Use route data for static configuration.

{
  path: 'about',
  component: AboutComponent,
  data: { 
    title: 'About Us',
    breadcrumb: 'About',
    animation: 'AboutPage'
  }
}

// In component
export class AboutComponent {
  // With component input binding enabled
  title = input<string>('');
  breadcrumb = input<string>('');
  animation = input<string>('');
}

• Route Events: Listen to router events to implement features like loading indicators.

@Component({
  selector: 'app-root',
  template: `
    <app-loading-bar *ngIf="isLoading()"></app-loading-bar>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  private router = inject(Router);
  isLoading = signal(false);
  
  ngOnInit() {
    this.router.events.pipe(
      filter(event => 
        event instanceof NavigationStart ||
        event instanceof NavigationEnd ||
        event instanceof NavigationCancel ||
        event instanceof NavigationError
      )
    ).subscribe(event => {
      if (event instanceof NavigationStart) {
        this.isLoading.set(true);
      } else {
        this.isLoading.set(false);
      }
    });
  }
}