Angular 15如何通过ng serve设置base href适配集群流量转发？

可行方案： #

1. 同时使用--base-href和--serve-path参数 #

在较新的Angular CLI版本中，单独使用--base-href可能无法生效，需要搭配--serve-path指定服务器挂载路径，两者保持一致：

ng serve --host 0.0.0.0 --disable-host-check --port 4203 --base-href /web/mypath/ --serve-path /web/mypath/

执行后，index.html中的<base>标签会正确设置为/web/mypath/，同时本地服务器会将应用部署到该路径下，适配集群流量转发场景。

2. 修改angular.json配置文件（永久生效） #

避免每次启动都输入长命令，可直接在项目配置文件中设置：
找到projects -> [你的项目名] -> architect -> serve -> options，添加以下配置：

"baseHref": "/web/mypath/",
"servePath": "/web/mypath/"

之后直接执行ng serve即可自动应用该基础路径配置。

3. 结合APP_BASE_HREF提供者与配置文件 #

如果上述方法仍无法解决，确保APP_BASE_HREF配置正确，同时配合build配置：

• 在AppModule中导入并提供APP_BASE_HREF：

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

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/web/mypath/' }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

• 在angular.json的build -> options中设置baseHref:

"baseHref": "/web/mypath/"

这样ng serve会继承build的baseHref配置，同时Angular路由也会使用该基础路径。

注意事项 #

• 确保使用较新稳定版Angular CLI，旧版本可能存在--base-href参数的bug；
• 若手动修改index.html的<base>标签被ng serve重置，是因为CLI默认会根据配置动态生成该标签，优先使用上述参数或配置文件的方式，不要手动修改index.html。

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