Angular15中relativeLinkResolution失效及loadChildren路由解析异常

1. relativeLinkResolution 配置报错问题 #

relativeLinkResolution 属性在Angular 14中被废弃，Angular 15已完全从ExtraOptions类型中移除，因此配置该属性会触发类型错误。

• 解决方法：直接删除relativeLinkResolution: 'legacy'这行配置。Angular 15的相对链接解析逻辑已默认对齐原legacy模式的行为，无需额外配置。
• 若迁移后仍存在相对导航异常，可在路由导航时显式指定relativeTo参数，示例代码：

  this.router.navigate(['../sibling'], { relativeTo: this.route });
  

2. loadChildren 无法解析及哈希路由配置问题 #

loadChildren 废弃与替代方案 #

loadChildren的字符串写法（如'./dashboard/dashboard.module#DashboardModule'）在Angular 13之后被废弃，Angular 15已不再支持该写法，需改用函数式懒加载语法：

• 旧写法（已废弃）：

  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  }
  

• 新写法（替代方案）：

  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
  

如果使用Angular 14+支持的独立组件路由，也可直接用loadComponent：

{
  path: 'dashboard',
  loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent)
}

哈希路由配置（实现localhost:4200/#/dashboard） #

要启用哈希模式路由，需在RouterModule.forRoot的配置项中添加useHash: true：

RouterModule.forRoot(routes, {
  useHash: true
})

配置后路由会自动添加#前缀，匹配你期望的路径格式。

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