Angular路由导航实现及app.routes.ts与app-routing.module.ts差异咨询

1. 两种文件的核心差异 #

• app-routing.module.ts：是Angular 16及以前版本的传统路由配置方式，属于NgModule架构下的产物。它是一个独立的NgModule，需要导入RouterModule并通过RouterModule.forRoot()注册路由数组，还要在模块的imports和exports中做相应配置，最终需要在根AppModule中导入这个路由模块才能生效。
  典型代码结构：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [/* 路由规则配置 */];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• app.routes.ts：是Angular 14+引入、Angular 17默认启用的独立路由配置，适配standalone（独立组件）架构。它直接导出一个Routes类型的数组，不需要包裹在NgModule中，只需要在main.ts或根组件中通过provideRouter()方法注册路由即可生效。
  典型代码结构：

  import { Routes } from '@angular/router';
  
  export const routes: Routes = [/* 路由规则配置 */];
  

  注册示例（main.ts中）：

  import { bootstrapApplication } from '@angular/platform-browser';
  import { provideRouter } from '@angular/router';
  import { routes } from './app/app.routes';
  import { AppComponent } from './app/app.component';
  
  bootstrapApplication(AppComponent, {
    providers: [provideRouter(routes)]
  });
  

2. 为什么你看到的文件不一致 #

你的Angular版本是17.0.8，该版本默认创建的是独立组件项目，因此会生成app.routes.ts作为路由配置文件。而《英雄之旅》教程可能基于Angular 16及以前的版本，或者教程中选择了启用NgModule的项目模板，所以使用的是app-routing.module.ts。

3. 核心用途完全一致 #

两种文件的核心功能都是定义应用的路由规则，包括路径映射、组件关联、路由守卫、解析器等配置，最终都是为了实现Angular应用的页面导航功能，只是封装形式适配了不同的项目架构：

• NgModule风格的路由适合传统的模块式项目；
• 独立路由配置更适配Angular的独立组件生态，减少模块嵌套，简化代码结构。

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