我想构建一次 Angular 5 应用程序,然后将其发布到不同的地址,例如:
默认情况下,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 value during-runtime-in-angularjs-app-using-value - 这仅适用于 Angular。
我目前的解决方法是在部署时更新变量 __webpack_require__.p ,但这是非常容易出错的,因为此时这个变量被最小化为类似“n.p”的东西,并且依赖于内部实现细节。
执行此操作的正确方法是什么?
最佳答案
在 .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 属性未设置的情况下进行回退。
关于angular - 在运行时更改 Angular 5 发布 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47293909/