Angular 在运行时设置基本 href答案

【问题标题】：Angular set base href at runtimeAngular 在运行时设置基本 href
【发布时间】：2019-06-18 09:28:57
【问题描述】：

我的 Angular 7 应用部署在服务器集群上，并且部署在多台服务器上：

http://server1:8081/my-app
http://server2:8081/my-app

此外，它还可以在将请求转发到可用子服务器的负载平衡器上使用：

https://my-balancer.com/apps/my-app

我正在使用 PathLocationStrategy，我想让它适用于所有 URL。

我遇到的问题是基本 href 属性，因为它的值应该在运行时设置：

http://server1:8081/my-app           <-- base_href should be /my-app/
https://my-balancer.com/apps/my-app  <-- base_href should be /apps/my-app/

有没有办法在运行时设置 base_href 属性，例如从 location.href 构建它的值？

我尝试将 APP_BASE_HREF 提供程序添加到 AppModule，但 angular 似乎忽略了它。

有什么想法吗？谢谢！

【问题讨论】：

【解决方案1】：

由于<base> 标签是在index.html 文件中设置的，在我们的AppComponent 之外，我认为Angular 不会提供特定的服务来实现这一点。因此，剩下的唯一选择是在 AppComponent 中手动进行

ngOnInit() {
   const base = document.head.querySelector('base');
   base.href = 'whatever you want';
}

这应该为您完成这项工作。

【讨论】：

【解决方案2】：

尝试在运行时修改 dist/index.html 文件，方法是向您的服务器实例添加 bash 脚本，如下所示：

#/bin/bash

sed -i 's/base href="\/my-app\/"/base href="'$1'"/' index.html

将新的 href 值作为参数传递给脚本。

希望对你有帮助。

【讨论】：