Angular 11升16后路由重复与Chrome无法调试.ts文件求助

一、修复Chrome开发者工具中.ts文件调试问题 #

修改angular.json的构建和服务配置，确保sourcemap正确生成：

• 调整build配置：
  找到项目下的architect -> build -> options，将sourceMap设置为完整开启的对象形式：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他原有配置...
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true,
      "hidden": false
    }
    // 其他原有配置...
  }
}

该配置确保组件的.ts文件sourcemap被完整生成，避免Chrome无法识别映射文件。

• 调整serve配置：
  找到architect -> serve -> options，同步开启sourcemap传递：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    // 其他原有配置...
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    }
    // 其他原有配置...
  }
}

修改后重启开发服务器，Chrome开发者工具的Sources面板即可找到对应的.ts文件，断点调试恢复正常。

二、修复路由重复追加"home"的问题 #

该问题几乎都是相对路径导航导致的，检查以下两处：

• 检查根路由的redirect配置：
  确保默认路由的redirectTo使用绝对路径（开头加/）：

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home', // 必须加斜杠，避免相对当前路径追加
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

如果之前写的是redirectTo: 'home'，每次刷新时当前路径为/home，相对路径会叠加为/home/home，多次刷新就会无限重复。

• 检查组件内的导航逻辑：
  如果组件或路由守卫中有主动导航到home的代码，确保使用绝对路径：

// 错误写法：在home组件中执行会触发相对路径追加
this.router.navigate(['home']);

// 正确写法：绝对路径导航
this.router.navigate(['/home']);

同时排查路由守卫（如CanActivate）是否在每次刷新时触发了重复导航，导致路径叠加。

三、依赖包异常检查 #

升级到Angular 16后，必须保证核心依赖版本统一：

• 所有@angular/*开头的包（core、common、router、cli等）版本必须为16.x.x，禁止混合15和16版本。
• rxjs版本需≥7.8.0，Angular 16对其有版本要求。
• zone.js版本需匹配~0.13.0，版本不匹配会引发运行时异常。

若存在版本混乱，执行以下命令统一升级：

npm install @angular/core@16 @angular/common@16 @angular/router@16 @angular/cli@16 --save

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