import { Routes } from '@angular/router';
import { EditorComponent } from './features/editor/editor.component';
import { AuthGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/editor',
    pathMatch: 'full',
  },
  {
    path: 'editor',
    component: EditorComponent,
    data: { title: 'Program Editor' },
  },
  {
    path: 'admin',
    loadChildren: () => import('./features/admin/admin.routes').then((m) => m.adminRoutes),
    canLoad: [AuthGuard],
    data: { preload: false },
  },
  {
    path: 'settings',
    loadComponent: () =>
      import('./features/settings/settings.component').then((m) => m.SettingsComponent),
  },
  {
    path: '**',
    loadComponent: () =>
      import('./shared/components/not-found/not-found.component').then((m) => m.NotFoundComponent),
  },
];

Real Example: Admin Routes with Lazy Loading

import { Routes } from '@angular/router';

export const adminRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./admin.component').then((m) => m.AdminComponent),
    children: [
      {
        path: 'dashboard',
        loadComponent: () =>
          import('./dashboard/dashboard.component').then((m) => m.AdminDashboardComponent),
      },
      {
        path: 'users',
        loadComponent: () => import('./users/users.component').then((m) => m.AdminUsersComponent),
      },
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },
    ],
  },
];

Lazy Loading Routes

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then((m) => m.adminRoutes),
    canLoad: [AuthGuard],
    data: { preload: false },
  },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
  },
  {
    path: 'users',
    loadChildren: () => import('./users/users.routes').then((m) => m.usersRoutes),
  },
];

// Separate route file (admin.routes.ts)
export const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: 'users',
        component: AdminUsersComponent,
      },
      {
        path: 'settings',
        component: AdminSettingsComponent,
      },
    ],
  },
];

Route Guards Integration

import { Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
import { RoleGuard } from './guards/role.guard';

export const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard, RoleGuard],
    canActivateChild: [AuthGuard],
    data: { roles: ['admin'] },
    children: [
      {
        path: 'users',
        component: UsersComponent,
        canDeactivate: [UnsavedChangesGuard],
      },
    ],
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard],
  },
];

Router Service Usage

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class NavigationService {
  constructor(private router: Router) {
    // Listen to navigation events
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        console.log('Navigation to:', event.url);
      });
  }

  navigateToUser(userId: string): void {
    this.router.navigate(['/users', userId]);
  }

  navigateWithQueryParams(): void {
    this.router.navigate(['/search'], {
      queryParams: { q: 'angular', page: 1 },
      queryParamsHandling: 'merge',
    });
  }

  goBack(): void {
    this.router.navigate(['../']);
  }

  getCurrentRoute(): string {
    return this.router.url;
  }
}

Route Resolvers

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';
import { User } from './user.model';

@Injectable({
  providedIn: 'root',
})
export class UserResolver implements Resolve<User> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    const userId = route.paramMap.get('id');
    return this.userService.getUser(userId!);
  }
}

// Usage in routes
export const routes: Routes = [
  {
    path: 'users/:id',
    component: UserDetailComponent,
    resolve: {
      user: UserResolver,
    },
  },
];

// Usage in component
export class UserDetailComponent {
  user: User;

  constructor(private route: ActivatedRouteSnapshot) {
    this.user = this.route.data['user'];
  }
}

Preloading Strategy

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // Preload based on data property
    if (route.data && route.data['preload']) {
      return load();
    }

    // Preload admin routes
    if (route.path === 'admin') {
      return load();
    }

    return of(null);
  }
}

// Usage in app.config.ts
import { provideRouter, withPreloading } from '@angular/router';

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

Component Navigation

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  template: `
    <div>
      <h2>User Detail</h2>
      <p>User ID: {{ userId }}</p>
      <p>Query Param: {{ searchQuery }}</p>

      <button (click)="goToEdit()">Edit User</button>
      <button (click)="goBack()">Back</button>
    </div>
  `,
})
export class UserDetailComponent {
  userId: string;
  searchQuery: string;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
    // Get route parameters
    this.route.paramMap.subscribe((params) => {
      this.userId = params.get('id')!;
    });

    // Get query parameters
    this.route.queryParamMap.subscribe((params) => {
      this.searchQuery = params.get('q')!;
    });
  }

  goToEdit(): void {
    this.router.navigate(['edit'], { relativeTo: this.route });
  }

  goBack(): void {
    this.router.navigate(['../'], { relativeTo: this.route });
  }
}

Route Animations

import { trigger, transition, style, animate, query, group } from '@angular/animations';

export const routeAnimations = trigger('routeAnimations', [
  transition('* <=> *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        width: '100%'
      })
    ], { optional: true }),
    group([
      query(':leave', [
        animate('300ms ease-out', style({ opacity: 0, transform: 'translateX(-100%)' }))
      ], { optional: true }),
      query(':enter', [
        style({ opacity: 0, transform: 'translateX(100%)' }),
        animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0%)' }))
      ], { optional: true })
    ])
  ])
]);

// Usage in app.component.html
<div [@routeAnimations]="getRouteAnimationState(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

Key Principles

Lazy Loading: Use lazy loading for better performance
Route Guards: Implement proper authorization with guards
Data Property: Use data property for route metadata
Resolvers: Use resolvers for data fetching before route activation
Relative Navigation: Prefer relative navigation in components
Route Events: Listen to router events for analytics/logging
Preloading: Implement custom preloading strategies for performance