Angular子路径部署时APP_BASE_HREF导致路由重复追加子路径问题

核心逻辑澄清 #

APP_BASE_HREF 的实际运行规则和静态HTML中的<base href>并不完全等价，Angular 路由在使用这个注入值时，会自带路径拼接处理逻辑，这是导致路径重复的根本原因。

• 路由计算导航URL的逻辑是：将当前站点根路径，和传入的APP_BASE_HREF值拼接，作为所有路由导航的基础前缀
• 你当前的生产部署场景下，入口页面的实际访问路径已经天然包含了/suburl段，也就是说浏览器本身已经把/suburl作为应用的访问根了

此时如果手动传入'suburl/'作为APP_BASE_HREF，路由就会在已有的/suburl前缀基础上，再次追加你设置的suburl/段，最终形成https://www.example.com/suburl/suburl的重复路径。
即使开启哈希路由模式，这个拼接逻辑也会作用于哈希段的路由前缀计算，最终出现https://www.example.com/suburl#/suburl/home的不符合预期的URL结构。

相对路径配置的生效原理 #

当你把APP_BASE_HREF设置为.时，Angular 不会手动追加任何固定路径段，而是直接以当前页面实际加载的URL路径为动态基准，计算路由的根地址：

• 本地开发环境下，应用默认运行在localhost:4200根路径，.对应当前根地址，所有路由跳转计算完全正常
• 生产部署在/suburl路径下时，.会自动识别当前页面的实际根路径就是/suburl/，跳转页面时只会在这个路径后拼接对应的路由段（例如/suburl/home），不存在手动重复追加路径的问题

这种相对路径的配置方式，本身就是Angular 为多环境、多部署路径场景设计的兼容方案，适配性远高于写死固定路径字符串的写法。

JBoss 环境的影响说明 #

JBoss 作为Java应用服务器，本身不会干预前端路由的运行逻辑，对你遇到的路径重复问题没有直接影响。
唯一需要额外配置的点是：在JBoss上部署子路径下的Angular应用时，需要配置请求重写规则，将所有指向前端路由的请求重定向回应用入口index.html，否则用户直接刷新非根路径的路由页面时，会收到服务器返回的404错误。这是所有前端单页应用部署在服务端时的通用配置要求，和前端路由的计算逻辑无关。

推荐的配置实现 #

如果要同时适配本地开发、子路径生产部署的需求，不需要专门编写判断生产/开发环境的分支逻辑，直接用相对路径配置即可：

@NgModule({
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '.'
    }
  ],
  // 其余模块配置
})
export class AppModule {}

配合Angular CLI构建时在angular.json中设置baseHref: './'、deployUrl: './'，同一份构建产物甚至可以部署到任意层级的子路径下，不需要针对不同部署环境单独打包。

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