使用base-href和deploy-url构建Angular CLI以访问CDN上的资产

Question

的背景

我正在使用Angular CLI来构建项目(具有多个应用程序).我想在我的域上的不同子路径上发布应用程序,例如example.com/apps/app1/.

如果我将--base-href参数设置为/apps/app1/它解决了有关路由器的任何问题,它将加载资产(js,css和图像等)就好了.

如果我使用该Location服务,我可以使用

this.location.prepareExternalUrl('/assets/data/data.json')

解决动态加载的资产(他们将解决/apps/app1/assets/data/data.json).

到现在为止还挺好.但我现在想通过CDN提供应用资产,例如cdn.example.com,在原始网址上托管应用本身example.com/apps/app1/.现在我使用以下方法构建应用程序:

 ng build -prod --app app1 --base-href "/apps/app1/" --deploy-url "http://cdn.example.com/app-assets/apps/app1/"

这次,我同时应用--base-href和--deploy-url参数.它的工作原理很好,因为它使用base-href来帮助路由器解析URL,并从CDN加载js和css文件.它还使用CDN URL解析CSS文件中的图像URL引用.

---

问题

动态地(在服务或模板中)从资源文件夹加载图像或数据时,我找不到使用deploy-url配置解析URL的好方法.

如果我使用该Location服务,它仍然使用base-href解析网址,所以

this.location.prepareExternalUrl('/assets/data/data.json')

仍然会解决/apps/app1/assets/data/data.json而不是http://cdn.example.com/app-assets/apps/app1/assets/data/data.json.

deploy-url如果定义了一个值,我本来期望它使用该值,特别是因为这将是在同一域上托管文件以及在外部域上托管文件时可以使用的通用解决方案.

---

这个问题

考虑base-href到deploy-url参数和参数,有没有办法解决资产URL ？

理想情况下是官方的Angular函数Location.prepareExternalUrl,但如果我能以某种方式从Angular获取base-href和deploy-url参数,我可以为它构建自己的服务.

我不想在环境配置中定义URL,因为:

1. 它需要每个应用程序的特定环境配置
2. 它会与构建应用程序时提供的值产生潜在冲突.

Answer 1

要--deploy-url在应用程序运行时访问值，请使用以下命令创建deploy-url.ts：

export const DEPLOY_URL = new InjectionToken<string>('deployUrl');

并在您的 main.ts 文件中使用此代码段：

const deployUrl = (function() {
  const scripts = document.getElementsByTagName('script');
  const index = scripts.length - 1;
  const mainScript = scripts[index];
  return mainScript.src.replace(/main.*?\.js$/, '');
})();

const DEPLOY_URL_PROVIDER = {
  provide: DEPLOY_URL,
  useValue: deployUrl,
};

platformBrowserDynamic([DEPLOY_URL_PROVIDER])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

这个想法是获取当前执行的 Javascript 文件的 url，即 main.js（或 main.hash.js，如果outputHashing已启用）并从中删除文件名。然后在您的服务中注入--deploy-url值@Inject(DEPLOY_URL) deployUrl: string作为构造函数参数。

Answer 2

以下是我为几个项目所做的工作。

使用服务器设置的动态值（例如 Cookie）设置 APP_BASE_HREF，SPA 在 init 时读取它。getBaseUrl 函数只是读取一个 cookie 值。

{ provide: APP_BASE_HREF, useFactory: () => getBaseUrl() }

将deployUrl 设置为CI 流程的一部分。您需要动态设置 BUILD 和 VERSION。这可以通过使用简单的 shell 脚本来完成。

https://my-cloud.cloudfront.net/my-app/{BUILD}/{VERSION}/