如何修改Angular应用的访问URL并添加子路径？

该需求必须配置base href，这是Angular识别应用根路径、正确加载静态资源和处理路由跳转的必要配置，具体实现步骤如下：

方案1：构建时指定参数（最常用，无需修改业务代码） #

直接在执行生产构建命令时添加--base-href参数即可，命令如下：

ng build --prod --base-href /firstApp/

注意路径前后的斜杠不能遗漏，构建完成后打包产物中的index.html会自动插入<base href="/firstApp/">标签，无需手动修改。

方案2：手动修改index.html的base标签 #

如果不想每次构建都追加参数，可以直接修改项目src/index.html文件中的base标签：

• 将默认的<base href="/">修改为<base href="/firstApp/">
• 改完后正常执行ng build --prod构建即可，效果和方案1完全一致。

方案3：通过APP_BASE_HREF注入动态配置 #

如果需要灵活切换部署路径，不想固定写死在代码或者构建参数里，可以通过依赖注入的方式配置：

• 在app.module.ts的providers数组中添加如下配置：

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  // 其他原有配置不变
  providers: [
    { provide: APP_BASE_HREF, useValue: '/firstApp/' }
    // 其他原有provider不变
  ]
})
export class AppModule { }

这种方式适合需要根据环境变量动态赋值部署路径的场景。

额外注意事项 #

• 如果你的Angular应用使用的是HashLocationStrategy（地址栏带#的路由模式），做完上面的配置后部署即可正常运行
• 如果使用的是PathLocationStrategy（无#的HTML5路由模式），还需要配置反向代理规则：所有匹配/firstApp/*的请求都要转发到当前Angular应用的index.html，否则刷新页面会出现404错误
• 本地开发如果也需要带/firstApp前缀访问，可以修改angular.json配置：找到projects -> 你的项目名 -> architect -> serve -> options节点，添加两项配置：

"baseHref": "/firstApp/",
"servePath": "/firstApp/"

重启ng serve后就可以通过http://localhost:4200/firstApp/访问本地开发服务。

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