angular-router

@angular/router

バージョン： Angular 21（2025） タグ： ルーティング、ナビゲーション、ガード、遅延読み込み、SPA

参考情報： ドキュメント — 公式ルーティングガイド • API • GitHub

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：関数型ガードとリゾルバー — クラスベースのガードよりも関数型のアプローチを推奨します ソース

• 新機能：Router inputs — ルート入力を介してコンポーネントにデータを渡す新しい方法です ソース

• 新機能：withComponentInputBinding — ルートパラメーターからのコンポーネント入力バインディングを有効にします

• 新機能：Router snapshots の改善 — ルートパラメーターの型安全性を向上させます

• 新機能：provideRouter() — 関数型プロバイダーを使った最新のルーター設定です

• 非推奨：RouterModule.forRoot() — 最新のアプリケーションでは provideRouter() を使用してください

ベストプラクティス

• 機能モジュールには遅延読み込みを使用します — 初期バンドルサイズを 50～70% 削減できます

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.DASHBOARD_ROUTES)
  }
];

• クラスベースのガードよりも関数型ガードを使用します

// ✅ Modern functional guard
const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

// ❌ Avoid class-based guards for new code
// @Injectable() export class AuthGuard implements CanActivate { ... }

• 遅延読み込みされるルートには CanMatch ガードを使用します — 未承認のコードのダウンロードを防ぎます

{
  path: 'admin',
  canMatch: [authGuard],
  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
}

• データの事前取得にはリゾルバーを使用します — 読み込みスピナーをなくせます

{
  path: 'user/:id',
  resolve: { user: userResolver }
}

// In component
@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  // Modern way
  user = input.required<User>();
  
  // Legacy way
  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user = data['user'];
    });
  }
}

• 型安全性を高めるためにルーター入力を使用します

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
};

// Component receives route params as inputs
@Component({})
export class UserComponent {
  @Input() id!: string;
}

• 404 ページにはワイルドカードルートを使用します

{
  path: '**',
  component: NotFoundComponent
}

• バックグラウンドで読み込むには PreloadAllModules を使用します

provideRouter(routes, withPreloading(PreloadAllModules))

• ナビゲーションには routerLink を使用します — SPA の動作を維持できます

// ✅ Correct
<a routerLink="/dashboard">Dashboard</a>

// ❌ Wrong - causes full page reload
<a href="/dashboard">Dashboard</a>

• URL パスには kebab-case を使用します — 一貫した命名規則になります

// ✅ Good
{ path: 'user-profile', ... }

// ❌ Avoid
{ path: 'userProfile', ... }