angular - 在运行时更改 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";

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

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

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

• How do I set the deployUrl at runtime in Angular - 这似乎不再起作用了。在我运行 ng build 之后，引用的变量 __webpack_public_path__ 在代码中的任何地方都不存在。
• Setting server url dynamically during runtime in AngularJs app using valueduring-runtime-in-angularjs-app-using-value - 这仅适用于 Angular。

我目前的解决方法是在部署时更新变量 __webpack_require__.p ，但这是非常容易出错的，因为此时这个变量被最小化为类似“n.p”的东西，并且依赖于内部实现细节。

执行此操作的正确方法是什么？

Answer 1

在 .angular-cli.json 中设置 deployUrl 设置，或将 --deploy-url 传递给构建命令会做两件事。它确保包含在 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>`

应用程序模块.ts

// imports etc...

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

@NgModule({})
...

这将确保 __webpack_require__.p 属性在加载时设置为配置值。

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