Angular 如何动态设置（运行时）--deploy-url？答案

【问题标题】：Angular How to set Dynamically(runtime) --deploy-url?Angular 如何动态设置（运行时）--deploy-url？
【发布时间】：2019-07-16 00:37:02
【问题描述】：

我可以如下动态设置 base-href。

index.html

<script>
  window['base-href'] = window.location.pathname;
</script>

app.module.ts

providers: [ 
        { provide: APP_BASE_HREF, useValue: window['base-href'] },
    ],

这对路由很有效。

它不适用于资产加载

如何设置资产？ --deploy-url 在编译时工作，但我如何在运行时做到这一点？

提到的链接是用于路由而不是从 SCSS 文件加载的资产（图像等）。

我所有的 http 调用都正常进行

例如：https://domain/<env>/<contexname>/<restcall_URI>

无法从 SCSS 加载图像

示例：为获取图片而生成的 URL：https://domain/assets/img/xyz.jpg

所需网址：https://domain/<env>/<contexname>/assets/img/xyz.jpg

如何告诉 Angular 获取带有所需 URL 的图像

【问题讨论】：

Angular 2 / 4 / 5 - Set base href dynamically的可能重复
@Ahmed，提到的链接是用于路由而不是用于从 SCSS 文件加载的资产（图像等）。我所有的 http 调用都正确发生示例：domain/<env>/<contexname>/<restcall_URI> 从 SCSS 加载的图像未发生示例：为获取图像生成的 Url：domain/assets/img/xyz.jpg 所需的 URL：domain/<env>/<contexname>/assets/img/xyz.jpg 如何告诉 Angular 使用所需的 URL 获取图像
在角度scss 图像路径与scss 文件本身相关，例如，您有home.component.scss 住在src/app/ 目录中，您想从src/assets/images 加载图像你的路径将是url('../assets/images/myimage.png') 现在有意义吗？

标签： angular

【解决方案1】：

我希望从 CDN 提供 Angular 文件。最终将此代码添加到 main.ts：

declare let __webpack_public_path__: any;
__webpack_public_path__ = window['cdnUrl'];

在您的 index.html 中，您可以动态设置 cdnUrl

window.cdnUrl = 'https://...';

【讨论】：

【解决方案2】：

在我们的例子中，我们需要相同的 dist 文件集来使用和不使用 url 路径前缀。解决方案是使用相对的 deploy-url 并动态更改 html 标签

--deploy-url ../static/

或者你可能需要

--deploy-url ./static/

和

  <base href="/some-path/">

或

  <base href="/">

【讨论】：