的背景

我正在使用 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，同时将应用程序本身托管在原始 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 and --deploy-url参数。它工作得很好，因为它使用 base-href 来帮助路由器解析 URL，并从 CDN 加载 js 和 CSS 文件。它还使用 CDN URL 解析 CSS 文件中的图像 URL 引用。

问题

从资源文件夹加载图像或数据时动态地（在服务或模板中），我找不到使用以下方法解析 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值（如果已定义），特别是因为这将是一种通用解决方案，在同一域上托管文件以及在外部域上托管文件时都可以使用。

问题

有没有一种方法可以同时考虑到资产 URL 的解析base-href和deploy-url参数？

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

我不想在环境配置中定义 URL，因为：

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

访问--deploy-url在应用程序运行时的值，创建deploy-url.ts with:

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作为构造函数参数。