Angular15.2.9：从懒加载模块跳转至即时路由触发NG04002错误求助

可能的原因及对应解决方案 #

1. 路由参数类型不匹配

如果g.id是数字类型，Angular路由器拼接路由时可能出现隐式转换异常，导致生成的路径不符合匹配规则。
解决方法：将参数显式转换为字符串：

<a class="authent-block shop-card wallet-card" *ngFor="let g of goods.data" [routerLink]="['/good', g.id.toString()]"></a>

或直接使用字符串拼接形式：

<a class="authent-block shop-card wallet-card" *ngFor="let g of goods.data" [routerLink]="'/good/' + g.id"></a>

2. 懒加载模块重复导入根路由模块

若CertificateListModule错误导入了AppRoutingModule（而非自身的CertificateListRoutingModule），会引发路由配置冲突，干扰根路由的匹配逻辑。
解决方法：检查CertificateListModule的导入项，确保仅导入自身路由模块：

@NgModule({
  declarations: [CertificateListComponent, CardViewComponent],
  imports: [
    CommonModule,
    CertificateListRoutingModule // 仅导入该模块
  ]
})
export class CertificateListModule {}

3. 路由守卫隐性拦截导航

如果/good/:id路由配置了CanActivate等守卫，守卫可能在懒加载模块上下文跳转时返回false，但错误信息未明确提示。
解决方法：临时移除/good/:id路由的守卫配置进行测试，若导航恢复正常，则排查守卫逻辑中的上下文判断问题。

4. Angular缓存或构建异常

Angular 15.x版本的懒加载模块可能因缓存导致路由配置未正确更新。
解决方法：

• 清理浏览器缓存并强制刷新页面（Ctrl+Shift+R）
• 执行ng clean && ng build重新构建项目
• 开发环境下在angular.json中设置build.options.cache: false关闭构建缓存

5. 根路由组件模块声明错误

确保GoodDetailsComponent已在AppModule中正确声明，未被误放入其他模块：

@NgModule({
  declarations: [
    AppComponent,
    GoodDetailsComponent, // 必须在此声明
    LoginComponent,
    NotfoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

验证步骤 #

1. 执行ng serve --aot启用AOT编译，排查模板语法或路由配置的隐性错误
2. 查看路由追踪日志（已开启enableTracing: true），确认NavigationStart阶段的url是否为/good/[actual_ID]，若正确则聚焦路由匹配阶段的配置问题

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