在运行时更改 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 之类的脚本，因为它部署到 /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 value during-runtime-in-angularjs-app-using-value - 这仅适用于 Angular。

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

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

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>`

app.module.ts

// imports etc...

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

@NgModule({})
...

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

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