Question

我想构建一个Angular 5应用程序，然后将其发布到不同的地址，例如：

默认情况下，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 - 这似乎不再起作用了。运行构建后，引用的变量__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，但这极易出错，因为此时此变量被最小化为类似＆＃34; n.p＆＃34;并依赖内部实施细节。

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

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 属性在加载时设置为配置的值。

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

在运行时更改Angular 5发布URL

1 个答案:

的index.html

app.module.ts