Angular 12升级至14后生产环境路由匹配失败问题

这是Angular 14路由解析逻辑的非兼容更新直接导致的，核心问题是拆分配置baseHref和APP_BASE_HREF为不同路径，触发了新逻辑下的路径计算偏差：

• Angular 12/13等旧版本：路由解析URL时，优先读取index.html里编译生成的<base>标签值（也就是angular.json里配置的baseHref）作为前缀，从浏览器当前地址中截掉这段前缀，剩余部分再去匹配路由表。之前生产环境能正常运行，就是因为路由会截掉/my-app/web/test-bui/这段前缀，剩下的路径刚好能匹配上定义的test-bui父路由下的子路由。
• Angular 14版本：官方修复了旧版本中APP_BASE_HREF优先级低于<base>标签的逻辑bug，现在路由会严格以APP_BASE_HREF的值作为唯一的前缀截取基准。生产环境APP_BASE_HREF配置为/my-app/web/，当访问地址是https://domain/my-app/web/test-bui/ui/hierarchical-list时，路由截完前缀拿到的待匹配路径是test-bui/ui/hierarchical-list，但因为baseHref配置为/my-app/web/test-bui/，框架初始化路由表时已经自动把test-bui拼到了所有路由的最前面，相当于代码里写的test-bui父路由实际变成了test-bui/test-bui/...的层级，自然匹配不上单段test-bui开头的路径，直接抛出路由不存在的错误，默认路由也因为前缀不匹配无法触发，router-outlet就只能渲染空白。

根据实际部署场景选一个方案即可：

• 方案1（官方推荐，长期维护最优）：统一两个配置的路径值，不要拆分配置。
  生产环境把angular.json里的baseHref改成和APP_BASE_HREF一致的/my-app/web/，将所有打包后的静态资源（main.js、vendor.js、assets资源等）部署到服务器的/my-app/web/目录下，调整路由表删掉多余的test-bui父路由层级，保证截完前缀的路径和路由表定义完全对应即可。
• 方案2（改动最小，适配现有部署结构）：保留现有静态资源存放路径，把两个配置对齐到静态资源根目录。
  把生产环境的APP_BASE_HREF改成和baseHref一致的/my-app/web/test-bui/，将应用入口调整为https://domain/my-app/web/test-bui/，在Nginx等web服务层配置重定向规则，把访问https://domain/my-app/web/的请求302跳转到/my-app/web/test-bui/即可，路由表里原来的test-bui父路由可以删掉，因为截完前缀后的路径直接就是子路由段，不需要额外套一层父路由。
• 方案3（临时兼容，不建议长期使用）：在根路由模块的RouterModule.forRoot()配置里显式添加relativeLinkResolution: 'legacy'，回退到Angular14之前的旧解析逻辑。注意这个配置项在Angular15及以上版本已经被移除，只能作为升级过渡的临时方案。
  配置示例：

  RouterModule.forRoot(appRoutes, {
    relativeLinkResolution: 'legacy'
  })
  

补充：baseHref是Angular应用的全局部署根标识，默认同时影响静态资源路径解析和路由计算，除非有非常特殊的场景，否则不要把它和APP_BASE_HREF配成不同值，否则后续框架升级很容易碰到这类非兼容变更导致的故障。

内容的提问来源于stack exchange，提问作者stephan.peters