I want to build an Angular 5 app once, and then publish it to different addresses, for example to:
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 allows me to run:
ng build --deploy-url "https://example.com/myapp1"
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:
- 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 .
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?