Angular 17.0.10中app-routing.module.ts与app.routes.ts的差异及最佳实践

一、两者核心区别 #

Angular从14版本开始引入独立组件模式，这两个文件分别对应不同的路由配置范式：

1. 适配的项目模式 #

• app-routing.module.ts：属于传统NgModule模式的路由文件，必须依赖@NgModule装饰器。它通过导入RouterModule，调用RouterModule.forRoot()注入路由配置，最后作为模块导出供AppModule导入使用，是Angular早期版本的标准写法。
• app.routes.ts：属于独立组件模式的标配文件，是纯路由数组的定义，完全脱离NgModule约束。在独立模式下，直接通过provideRouter()将路由配置注入到应用的依赖注入系统中，是Angular 14+主推的轻量化写法。

2. 文件写法差异 #

app-routing.module.ts 示例

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.routes.ts 示例

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent }
];

在独立模式的main.ts中使用：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

3. 演进方向与灵活性 #

• app-routing.module.ts：依赖NgModule体系，写法冗余，目前仅为兼容旧项目保留，Angular官方已不再推荐新项目使用。
• app.routes.ts：更轻量化，无NgModule依赖，适配独立组件的发展趋势，后续Angular的新特性会优先适配该模式。

二、路由配置最佳实践 #

结合Angular 17的特性，以下是实用的路由配置建议：

1. 优先采用独立模式的app.routes.ts #

既然使用的是Angular 17，直接选择独立模式的路由配置，减少NgModule带来的冗余代码，提升项目的可维护性与轻量化程度。

2. 规范懒加载实现 #

懒加载是优化首屏加载速度的核心手段，独立模式下推荐两种写法：

• 懒加载单个独立组件：

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

• 懒加载模块化路由：

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

3. 合理使用路由守卫 #

路由守卫用于控制路由访问权限，推荐将守卫设为全局提供的服务（@Injectable({providedIn: 'root'})），然后在路由中关联：

import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  }
];

4. 配置通配路由处理404 #

务必在路由数组末尾添加通配路由，处理无效路径：

const routes: Routes = [
  // 其他业务路由
  { path: '**', component: NotFoundComponent }
];

5. 路由模块化拆分 #

当项目路由数量较多时，按功能模块拆分路由文件（如user.routes.ts、order.routes.ts），再通过懒加载或导入的方式整合到主路由中，保持主路由文件简洁。

6. 开发环境启用路由调试 #

在开发阶段，可启用路由跟踪日志排查问题：

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withDebugTracing())
  ]
});

7. 规范路由参数使用 #

• 动态路由参数（如user/:id）用于标识唯一资源，通过ActivatedRoute.paramMap获取；
• 查询参数（如?page=1&size=10）用于非必填的筛选、分页场景，通过ActivatedRoute.queryParamMap获取。

内容的提问来源于stack exchange，提问作者MJ X