在运行时更改Angular 5发布URL [英] Changing Angular 5 publish url at runtime

问题描述

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

I want to build an Angular 5 app once, and then publish it to different addresses, for example to:

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

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

默认情况下，Angular将假定所有文件都托管在/中，因此当我访问index.html时，它将加载诸如

By default, Angular will assume that all files are hosted in / so when i access index.html, it will load scripts such as https://sub1.example.com/vendor.bundle.js which will 404 because it's deploy to /myapp1/vendor.bundle.js (to make it slightly more complex, I'm actually loading the files from a CDN from a separate domain, but I don't think this affects the question):

Angular 5允许我运行:

Angular 5 allows me to run:

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

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

This will modify the inline.bundle.js and set the following:

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

这将确保从正确的路径加载脚本.

This in turn will make sure that scripts are loaded from the proper path.

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

However, this is a compile time switch, and I want to configure this either at deploy-time or at runtime.

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

I've read various suggestions, such as:

• 如何在运行时在以下位置设置deployUrl角度-似乎不再起作用.在我执行ng build之后，引用的变量__webpack_public_path__在代码中不存在.
• 在运行时在AngularJs应用程序中使用值动态设置服务器URL 在运行时，在angularjs-app-using-value中-仅适用于Angular.

• How do I set the deployUrl at runtime in Angular - This does not seem to work any more. The referenced variable __webpack_public_path__ does not exist anywhere in the code after I run ng build.
• Setting server url dynamically during runtime in AngularJs app using value during-runtime-in-angularjs-app-using-value - This only applies to Angular .

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

My current workaround is to update the variable __webpack_require__.p at deploy-time, but this is extremly error-prone since this variable at this point is minimized to something like "n.p" and relying on an internal implementation detail.

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

What would be the proper approach to do this?

推荐答案

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

Setting the deployUrl setting in .angular-cli.json, or passing in the --deploy-url to the build command does 2 things. It makes sure that the script includes in the index.html file are using that as the base, and it sets a variable that makes sure that webpack adds that as the "base path" for any lazy loaded modules. That much we agree on I guess, and figuring out where to load the scripts from in the html is pretty simple. However, setting the path that webpack should use is a bit more tricky... The value used by webpack is not named __webpack_public_path__ as mentioned in the linked suggestion and in the documentation.

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

You even mention the solution yourself when you say that setting the --deploy-url causes the following

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

因此，不必像文档中所述在运行时设置 __ webpack_public_path __ ，而是必须设置 __ webpack_require __.p 属性.

So, instead of setting the __webpack_public_path__ at runtime, as mentioned explained in the documentation, you have to set the __webpack_require__.p property.

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

The easiest way to do this is to just set it in the app.module.ts file. Doing something like this should work in your scenario

<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 属性设置为配置的值.

This will make sure that the __webpack_require__.p property is set to the configured value on load.

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

In this case I just added the configured value as a config variable on the window object, but you can fetch it from wherever you want. And to keep it simple, I just assumed the value would always be there... You might want to have a fallback in case the config object isn't available, or the basePath property isn't set.

这篇关于在运行时更改Angular 5发布URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！