Angular中routerLink无法导航至懒加载模块的问题排查

核心原因 #

你碰到的NG04002错误，本质是路由路径不匹配，具体有两个关键问题：

1. 懒加载模块的导入路径存在笔误 #

在app-routing.module.ts里，懒加载模块的导入语句：

const myModule = () => import('./my-routing/my-.module').then(x => x.MyRoutingModule);

这里的文件名my-.module明显写错了，应该是my-routing.module——这个错误会导致懒加载模块根本无法被正确加载，自然找不到里面定义的test路由。

2. 路由跳转路径不符合配置逻辑 #

你的懒加载模块挂载在根路由的experiment路径下，也就是说my-routing.module.ts里的test是子路由，完整路径应为/experiment/test。但你在test.component.html里写的是：

<a [routerLink]="['test']">

这种写法是跳转到根路径下的test，而根路由里根本没有这个配置，所以触发了路由匹配失败的错误。

修复步骤 #

步骤1：修正懒加载模块的导入路径 #

把app-routing.module.ts里的导入语句改成正确的文件名：

const myModule = () => import('./my-routing/my-routing.module').then(x => x.MyRoutingModule);

步骤2：修正路由跳转路径 #

有两种可行的修正方式：

方式一：使用绝对路径跳转

直接指定完整的路由路径：

<a [routerLink]="['/experiment/test']">
  <button type="button" class="btn btn-primary">Test</button>
</a>

方式二：使用相对路径跳转

如果TestComponent本身处于experiment路由的层级下，可以用相对路径（注意前缀的.）：

<a [routerLink]="['./test']">
  <button type="button" class="btn btn-primary">Test</button>
</a>

额外优化建议 #

• 根路由模块app-routing.module.ts里不需要导入ListComponent，它属于懒加载模块，导入后会破坏懒加载的效果，直接删除该行导入即可。
• 确认懒加载模块的类名与文件名对应，确保my-routing.module.ts里的MyRoutingModule确实是该模块的导出类。

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