How can I setup my app that is running as a webcomponent that is has to load chunks from the server that served the scripts for the webcomponent, instead of trying to lazyload form the server that just served the page containing the webcomponent?
The problem in more detail:
I have a component in my angular app LazytestComponent that is lazy loaded.
The code for loading it:
const {LazytestComponent} = await import('../lazytest/lazytest.component');
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LazytestComponent);
const instance = this.lazyContainer.createComponent(componentFactory, undefined, this.injector);
Angular generates a chunk for this component, that only accessed (networktab) when this lazy code runs.
This works when running the app with ng serve.
Now this build as a webcomponent, by using angular/elements:
In the @NgModule:
we have:
ngDoBootstrap() {
const webComponent = createCustomElement(LazyApp, {injector: this.injector});
customElements.define('lazyapp', webComponent);
}
This also works, I can now load the 3 script files of my app on another server and use the <lazyapp>-Tag to include it in the page.
html page on the other server:
<html>
<head>
<script src="http://localhost:8089/lazy/polyfills.js"></script>
<script src="http://localhost:8089/lazy/runtime.js"></script>
<script src="http://localhost:8089/lazy/main.js"></script>
</head>
<body>
<lazyapp></lazyapp>
</body>
</html>
The webpage is served from localhost:8080 - the angular app is loaded from localhost:8089.
The app loads as the web component, but then fails when running the lazy loading.
Instead of loading the chunk from "http://localhost:8089/lazy/317.js" it tries to load it from "http://localhost:8080/317.js" - this is the server that serves the html page, and of course it isn't there.
How can I tell my app the url where it can find it's chunks?