Angular14非根目录部署路由匹配失败问题求助

问题根源 #

你同时在angular.json配置了"baseHref": "/app1/"，又在App模块里设置了{ provide: APP_BASE_HREF, useValue: '.' }，这俩配置冲突了。加上路由里多余的app1路径规则，导致Angular解析路由时逻辑混乱：当直接访问domain.com/app1/page1时，Angular会把app1/page1当成完整的路由段去匹配，自然找不到对应规则。

修复步骤 #

1. 移除重复的BASE_HREF配置
   删除App模块中{ provide: APP_BASE_HREF, useValue: '.' }这行代码，只保留angular.json里的"baseHref": "/app1/"即可，它会告诉Angular应用的基础路径是/app1/。

2. 修正路由配置
   因为baseHref已经是/app1/，Angular内部的路由路径是相对于这个基础路径的。所以要删掉路由里的app1重定向规则，把根路径（空字符串）重定向到page1：

   [
     {
       path: '',
       redirectTo: 'page1',
       pathMatch: 'full'
     },
     {
       path: 'page1',
       component: OneComponent
     },
     {
       path: 'page2',
       component: TwoComponent
     }
   ]
   

3. 重新构建部署
   确保构建时baseHref生效，执行构建命令：

   ng build --base-href /app1/
   

   或者直接用angular.json里的配置构建，效果一致。

这样修改后，访问domain.com/app1会重定向到domain.com/app1/page1，直接访问或刷新domain.com/app1/page1、domain.com/app1/page2都能正常匹配路由了。

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