# 使用 Angular CLI 创建项目（自动包含 Router）
ng new my-app --routing
 
# 为已有项目添加路由能力（通常已内置，无需额外操作）
ng add @angular/router
 
# Angular Router 是 Angular 的核心包，随 @angular/core 一起安装
# 不需要单独 npm install，只需在配置中引入 provideRouter

// app.routes.ts — 路由配置
import { Routes } from '@angular/router'
 
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    loadComponent: () =>
      import('./home/home.component').then(m => m.HomeComponent),
  },
  {
    path: 'about',
    loadComponent: () =>
      import('./about/about.component').then(m => m.AboutComponent),
  },
  {
    path: 'users/:id',
    loadComponent: () =>
      import('./user/user-detail.component').then(m => m.UserDetailComponent),
    resolve: { user: userResolver },
  },
  {
    path: '**',
    loadComponent: () =>
      import('./not-found/not-found.component').then(m => m.NotFoundComponent),
  },
]

// app.config.ts — 应用配置
import { ApplicationConfig } from '@angular/core'
import {
  provideRouter,
  withPreloading,
  withComponentInputBinding,
  withViewTransitions,
  PreloadAllModules,
} from '@angular/router'
import { routes } from './app.routes'
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withPreloading(PreloadAllModules),
      withComponentInputBinding(),
      withViewTransitions(),
    ),
  ],
}

// app.component.ts — 根组件
import { Component } from '@angular/core'
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <nav>
      <a routerLink="/home" routerLinkActive="active">首页</a>
      <a routerLink="/about" routerLinkActive="active">关于</a>
    </nav>
    <router-outlet />
  `,
})
export class AppComponent {}

// main.ts — 应用启动
import { bootstrapApplication } from '@angular/platform-browser'
import { provideRouter } from '@angular/router'
import { AppComponent } from './app.component'
import { routes } from './app.routes'
 
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
})

// 1. Eager Loading — 应用启动时立即加载
{ path: 'home', component: HomeComponent }
 
// 2. Lazy Loading 组件 — 按需加载独立组件（v15+ Standalone）
{ path: 'about', loadComponent: () => import('./about.component').then(m => m.AboutComponent) }
 
// 3. Lazy Loading 子路由 — 按需加载整棵子路由树
{ path: 'admin', loadChildren: () => import('./admin.routes').then(m => m.ADMIN_ROUTES) }

{
  path: 'dashboard',
  loadComponent: () => {
    const flags = inject(FeatureFlags)
    return flags.isPremium
      ? import('./premium-dashboard.component')
      : import('./basic-dashboard.component')
  },
}

import { inject } from '@angular/core'
import { CanActivateFn, CanDeactivateFn, CanMatchFn, ResolveFn, Router } from '@angular/router'
 
// 1. canActivate — 控制是否可进入路由
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  const router = inject(Router)
  return authService.isAuthenticated()
    ? true
    : router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } })
}
 
// 2. canDeactivate — 控制是否可离开路由（如未保存表单）
export const unsavedGuard: CanDeactivateFn<FormGroup> = (component) => {
  return component.isDirty
    ? window.confirm('有未保存的更改，确定离开吗？')
    : true
}
 
// 3. canMatch — 控制路由是否参与匹配（替代废弃的 canLoad）
export const featureFlagGuard: CanMatchFn = (route, segments) => {
  const flags = inject(FeatureFlags)
  return flags.isEnabled(route.data?.['featureKey'] ?? '')
}
 
// 4. resolve — 路由激活前预取数据
export const userResolver: ResolveFn<User> = (route) => {
  const userService = inject(UserService)
  return userService.getUser(route.paramMap.get('id')!)
}
 
// 5. canActivateChild — 控制子路由激活
export const childAuthGuard: CanActivateChildFn = (route, state) => {
  return inject(AuthService).isAuthenticated()
}

import { inject } from '@angular/core'
import { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router'
import { filter, pairwise } from 'rxjs'
 
const router = inject(Router)
 
// 监听导航结束事件
router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd),
).subscribe(event => {
  console.log('Navigation ended to:', event.urlAfterRedirects)
})
 
// 导航错误处理
router.events.pipe(
  filter((e): e is NavigationError => e instanceof NavigationError),
).subscribe(event => {
  console.error('Navigation error:', event.error)
})

// 自定义预加载策略示例
import { PreloadingStrategy, Route } from '@angular/router'
import { Observable, of } from 'rxjs'
 
export class SelectivePreloadingStrategy extends PreloadingStrategy {
  preload(route: Route, load: () => Observable<unknown>): Observable<unknown> {
    // 仅预加载标记了 data: { preload: true } 的路由
    return route.data?.['preload'] ? load() : of(null)
  }
}
 
// 配置
provideRouter(routes, withPreloading(SelectivePreloadingStrategy))

# 创建项目（含路由）
ng new my-app --routing --style=scss
 
# 开发服务器
ng serve
 
# 构建（开发环境）
ng build
 
# 生产构建（含 AOT、Tree-shaking、代码压缩）
ng build --configuration production
 
# 运行测试
ng test
 
# E2E 测试
ng e2e
 
# 分析构建产物
ng build --stats-json && npx webpack-bundle-analyzer dist/my-app/stats.json

// app.routes.ts — 使用布局路由组织不同区域的页面
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./layouts/main-layout.component').then(m => m.MainLayoutComponent),
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: () =>
          import('./features/home/home.routes').then(m => m.HOME_ROUTES),
      },
      {
        path: 'users',
        loadChildren: () =>
          import('./features/users/users.routes').then(m => m.USER_ROUTES),
      },
    ],
  },
  {
    // 登录/注册使用独立布局（无侧边栏/导航）
    path: '',
    loadComponent: () =>
      import('./layouts/auth-layout.component').then(m => m.AuthLayoutComponent),
    children: [
      {
        path: 'login',
        loadComponent: () =>
          import('./features/auth/login.component').then(m => m.LoginComponent),
      },
    ],
  },
  { path: '**', redirectTo: 'home' },
]

import { TestBed, fakeAsync, tick } from '@angular/core/testing'
import { provideRouter, Router } from '@angular/router'
import { provideLocationMocks } from '@angular/common/testing'
import { AppComponent } from './app.component'
 
describe('Routing', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        provideRouter([
          { path: '', redirectTo: '/home', pathMatch: 'full' },
          { path: 'home', component: AppComponent },
        ]),
        provideLocationMocks(),
      ],
    }).compileComponents()
  })
 
  it('should navigate to home', fakeAsync(() => {
    const router = TestBed.inject(Router)
    const fixture = TestBed.createComponent(AppComponent)
 
    router.navigate(['/home'])
    tick()
    fixture.detectChanges()
 
    expect(router.url).toBe('/home')
  }))
})

// ✅ 推荐：按功能模块拆分路由，全部使用懒加载
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./layouts/main-layout.component').then(m => m.MainLayoutComponent),
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: () =>
          import('./features/home/home.routes').then(m => m.HOME_ROUTES),
      },
      {
        path: 'users',
        loadChildren: () =>
          import('./features/users/users.routes').then(m => m.USER_ROUTES),
      },
    ],
  },
  { path: '**', redirectTo: 'home' },
]

// ✅ 推荐：使用函数式守卫 + inject() + 组合模式
const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  const router = inject(Router)
 
  if (!authService.isAuthenticated()) {
    return router.createUrlTree(['/login'], {
      queryParams: { returnUrl: state.url },
    })
  }
  return true
}
 
const adminGuard: CanActivateFn = () => {
  const authService = inject(AuthService)
  const router = inject(Router)
  return authService.user()?.role === 'admin'
    ? true
    : router.createUrlTree(['/forbidden'])
}
 
// 路由配置中组合多个守卫
{
  path: 'admin',
  canActivate: [authGuard, adminGuard],
  loadChildren: () => import('./admin.routes').then(m => m.ADMIN_ROUTES),
}

// ✅ 推荐：使用 Resolve + withComponentInputBinding 替代手动订阅
const userResolver: ResolveFn<User> = (route) => {
  const userService = inject(UserService)
  return userService.getUser(route.paramMap.get('id')!)
}
 
// 路由配置
{
  path: 'users/:id',
  resolve: { user: userResolver },
  loadComponent: () =>
    import('./user-detail.component').then(m => m.UserDetailComponent),
}
 
// 组件 — 通过 @Input 直接接收路由参数和 Resolve 数据
@Component({ /* ... */ })
export class UserDetailComponent {
  @Input() id!: string    // 来自路由参数 :id
  @Input() user!: User    // 来自 resolve: { user: userResolver }
}
 
// ✅ v17+ 更推荐：使用 Signal input
@Component({ /* ... */ })
export class UserDetailComponent {
  id = input.required<string>()
  user = input.required<User>()
}

// ✅ 推荐：使用 currentNavigation Signal（v20.2+）追踪导航状态
@Component({
  selector: 'app-loading-bar',
  template: `<div class="bar" [class.active]="isNavigating()"></div>`,
})
export class LoadingBarComponent {
  private router = inject(Router)
 
  isNavigating = computed(() => this.router.currentNavigation() !== null)
}