Angular库内路由点击后拼接旧路径引发NG04002错误求助

核心原因 #

1. 主应用路由层级缺失
   你的主应用路由中，Screen02Component对应的路由未指定path: 'test02'，导致路由结构的父级节点不明确。虽然手动输入路径能通过redirect和子路由匹配，但Angular路由导航机制在计算相对路径时，无法正确识别父级路由节点，进而引发routerLink路径拼接错误。

2. routerLink相对路径使用错误
   当前处于/test02/view01时，<a routerLink="view02">是基于当前激活的view01路由节点的相对路径，会直接拼接成/test02/view01/view02。但你的路由配置中，view02是Screen02Component的同级子路由，并非view01的子路由，因此触发路由未识别错误。

修复步骤 #

步骤1：补全主应用路由的层级配置

修改主应用app.routing.ts，给Screen02Component的路由添加path: 'test02'，明确路由层级：

export const appRoutes: Route[] = [
    {
        path: '',
        redirectTo: 'test02',
        pathMatch: 'full'
    },
    {
        path: 'test02', // 新增该行
        component: Screen02Component,
        children: [...ROUTES]
    }
];

步骤2：修正routerLink的路径写法

有两种可选方式：

• 方式一：使用相对父级路径
  在view01.component.html中，用../回到父级路由（test02）再跳转：

<p>view01 works!</p>
<a routerLink="../view02">view02</a>

• 方式二：使用绝对路径
  直接指定完整绝对路径（不推荐硬编码，除非路径固定）：

<p>view01 works!</p>
<a routerLink="/test02/view02">view02</a>

额外优化（可选）

如果希望库内路由更独立，可在库的路由模块中保留完整路由结构，主应用通过懒加载方式集成，而非直接导入ROUTES数组。比如主应用路由改为：

export const appRoutes: Route[] = [
    {
        path: '',
        redirectTo: 'test02',
        pathMatch: 'full'
    },
    {
        path: 'test02',
        loadChildren: () => import('libs/apps/test02/src/lib/test02.module').then(m => m.Test02Module)
    }
];

同时确保库的Test02RoutingModule已配置好子路由，这样路由结构更清晰，也符合MFE的模块化思想。

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