从 CDN 加载脚本/资产时如何在 Angular 中设置 APP_BASE_HREF DI 令牌答案

【问题标题】：How to setup APP_BASE_HREF DI Token in Angular when Scripts/Assets are being loaded from a CDN从 CDN 加载脚本/资产时如何在 Angular 中设置 APP_BASE_HREF DI 令牌
【发布时间】：2022-01-17 01:13:47
【问题描述】：

我目前尝试设置一个托管在域上的 Angular 应用程序，并从 CDN 获取其脚本和资产。应用程序的路径是www.domain.de/subpath/（显然已针对这个问题进行了更改），当我在 CI 管道中构建应用程序时，我使用的是ng build--configuration=${ENV} --base-href=${CDN_URL}。由于仅使用此设置，应用程序将尝试在CDN_URL 上进行路由，我正在尝试使用APP_BASE_HREF DI 令牌，如Angular Docs 中所述。

但是，无论我将什么设置为 DI 令牌，我总是会遇到不想要的行为：

{ provide: APP_BASE_HREF, useValue: `${environment.BASE_URL}/` }
Result when navigating to www.domain.de/subpath/ -> www.domain.de/landing-page

{ provide: APP_BASE_HREF, useValue: `${environment.BASE_URL}/subpath` }
Result when navigating to www.domain.de/subpath/ -> www.domain.de/subpath/subpath/landing-page

DESIRED Result would be: www.domain.de/subpath/ -> www.domain.de/subpath/landing-page

我之前有一个使用 ng build --configuration=${ENV} --deploy-url=${CDN_URL} --base-href="/subpath/" 的设置，但 deploy-url 已被弃用，并且仅从 CDN 加载脚本而不是资产。

我有什么遗漏或者我想要的东西是用这种简单的方法根本无法实现的吗？

【问题讨论】：

标签： angular angular-router

【解决方案1】：

我尝试了很长一段时间从 CDN URL 加载资产，但遇到了类似的问题。这就是我最终做的：

declare let __webpack_require__: any;

if (environment.production) {
    enableProdMode();
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    // eslint-disable-next-line prefer-const
    const cdnPath = `${environment.BASE_URL}/<subpath>`
    __webpack_require__.p = cdnPath;
}

这会更新 webpack 的 runtime.js 路径，从该路径中动态加载资产。这很 hacky，但它对我有用。

【讨论】：