angular-extensions / elements

Lazy load Angular Elements (or any other web components / custom elements ) with ease!
https://angular-extensions.github.io/elements/
MIT License
317 stars 40 forks source link

A platform with a different configuration has been created. Please destroy it first. #68

Closed gs-smuthyam closed 3 years ago

gs-smuthyam commented 3 years ago

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.

image

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" } }

tomastrajan commented 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.

gs-smuthyam commented 3 years ago

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.

tomastrajan commented 3 years ago

@gs-smuthyam thanks for sharing!