在运行时更改Angular 5发布URL

Question

我想一次构建一个Angular 5应用，然后将其发布到其他地址，例如：

• https://sub1.example.com/myapp1
• https://sub2.example.com/myapp2
• https://sub3.example.com/myapp3

默认情况下，Angular将假定所有文件都托管在/中，因此当我访问index.html时，它将加载脚本https://sub1.example.com/vendor.bundle.js之类的脚本，该脚本将显示404，因为它已部署到/ myapp1 / vendor.bundle.js（为了使它稍微复杂一点，我实际上是从单独域中的CDN加载文件，但我认为这不会影响该问题）：

Angular 5允许我运行：

ng build --deploy-url "https://example.com/myapp1"

这将修改inline.bundle.js并设置以下内容：

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "https://example.com/myapp1";

反过来，这将确保从正确的路径加载脚本。

但是，这是一个编译时开关，我想在部署时或运行时进行配置。

我阅读了各种建议，例如：

• 如何在Angular中的运行时设置deployUrl-似乎不再起作用。我运行ng build之后，引用的变量__webpack_public_path__在代码中不存在。
• 使用 运行时期间值在AngularJs应用程序中动态设置服务器url，该值仅适用于Angular。

我当前的解决方法是在部署时更新变量__webpack_require __。p，但这极易出错，因为此时此变量被最小化为“ np”之类，并且依赖于内部实现细节。

这样做的正确方法是什么？

Answer 1

在.angular-cli.json中设置deployUrl设置，或将--deploy-url传递给build命令，会做两件事。它确保index.html文件中包含的脚本使用该脚本作为基础，并设置一个变量，以确保webpack将其添加为所有延迟加载的模块的“基础路径”。我想我们已经达成共识，并且弄清楚从html加载脚本的位置非常简单。但是，设置webpack应该使用的路径会有些棘手...如链接建议和文档中所述，webpack使用的值未命名为 __webpack_public_path__。

当您说设置--deploy-url会导致以下情况时，您甚至自己提到解决方案

__webpack_require__.p = "https://example.com/myapp1"; 

因此，而不是设置__webpack_public_path__，在运行时所提到的文件中解释，你必须设置__webpack_require __，P属性。

最简单的方法是在app.module.ts文件中进行设置。做这种事情应该在您的情况下工作

index.html

<script>
  window.config = { basePath: 'https://sub1.example.com/myapp1' }
</script>`

app.module.ts

// imports etc...

declare var __webpack_require__: any;
declare var config;
__webpack_require__.p = window.config.basePath;

@NgModule({})
...

这将确保__webpack_require __。p属性设置为加载时的配置值。

在这种情况下，我只是将配置的值添加为窗口对象上的config变量，但是您可以从任意位置获取它。为了简单起见，我只是假设该值将始终存在...如果配置对象不可用或未设置basePath属性，您可能希望进行回退。