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

Question

背景

我正在使用 Angular CLI 构建一个项目(包含多个应用程序)。我想在我域中的单独子路径上发布应用程序，例如 example.com/apps/app1/。

如果我将 --base-href 参数设置为 /apps/app1/ 它会解决有关路由器的任何问题，并且会加载 Assets (JS， CSS 和图像等)就好了。

如果我使用Location服务，我可以使用

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

解析动态加载的 Assets (它们将解析为 /apps/app1/assets/data/data.json)。

到目前为止一切顺利。但我现在想通过 CDN 提供应用程序 Assets ，例如 cdn.example.com，同时在原始 URL 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 引用。

---

问题

当从 Assets 文件夹动态加载图像或数据时(在服务或模板中)，我找不到一个很好的方法来解析 URL 使用deploy-url 配置。

如果我使用Location 服务，它仍然使用base-href 来解析URL，所以

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 参数来解析 Assets URL？

理想情况下，像 Location.prepareExternalUrl 这样的官方 Angular 函数，但如果我能以某种方式从 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(如果启用了 outputHashing，则为 main.hash.js)并从中删除文件名。然后在您的服务中注入(inject) --deploy-url 值，将 @Inject(DEPLOY_URL) deployUrl: string 作为构造函数参数。