Closed gs-smuthyam closed 3 years ago
Hi @gs-smuthyam !
Interesting! Nice to see that you try to make this work with externals to reduce final bundle size! One thign we should try to rule out in the beginning is that if this also happens if you just use native <script>
tags when loading elements (eg at the end of index.html, or even added later imperatively ) to figure out if this has to do more with the build process of your shell / elements or this library.
Hi @tomastrajan ,
Thank you for taking your time. I have tried keeping at the end and removing preload too :). Unfortunately these did not work.
However, it worked with this change in webpack.externals, sharing here for community.
output: {
jsonpFunction: 'wpJsonp
where the appName is unique key per element, may be one can use app name there.
@gs-smuthyam thanks for sharing!
My use case is below
There are multiple angular elements being served from different hosts. Another app(main) which consumes these elements. All of them are using same version of libs. I used externals in all the paces including main app so that the additional scripts file and polyfills would be served from main. From the elements just included the main bundle file. It all works fine until I use second element from second bundle. Once I load the second bundle it errors out with the title and would not load it. Stack trace is as below. Any help to resolve this issue would be appreciated.
Not sure if this is something to do with ngx-build-plus
my externals config is as below
module.exports = { output: { jsonpFunction: 'wpJsonpTimeline '
},
"externals": {
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/common/http": "ng.common.http",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
"@angular/compiler": "ng.compiler",
"@angular/elements": "ng.elements",
"@angular/router": "ng.router",
"@angular/forms": "ng.forms"
}
}