I'm facing a strange behavior using Angular Elements to build a widget. I have created a widget to pop-up a simple feedback form on another site, build with Angular too, and work pretty well in development, but when I build the application for production, there are incompatibilities between the widget and some lazy loaded modules.
The widget is loaded into the application from an external URL when application first load. Then I log in to the application and when a module is lazy loaded, it reports the following error
Some contextual info:
- The widget is build using "@angular/elements": "^7.0.1"
- The widget is using a pollyfill cause Web components is not broad adopted yet.
- The pollyfills uses Zone.js
- The app is build using Angular 7.0.1
Digging into this fuzzy error message I figure out that this was related with Zone.js loaded twice by the app and the widget, this are issues related with this - https://github.com/angular/angular/issues/24466 - https://github.com/angular/angular/issues/24181 - https://github.com/angular/angular/issues/26158
Uncaught Error: Zone already loaded.
at polyfills.d19af636bcf00eb4898f.js:1
at polyfills.d19af636bcf00eb4898f.js:1
at Object.0TWp (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at Module.hN/g (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at Object.1 (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at r (runtime.f35a2a91d37680127d85.js:1)
at Array.t [as push] (runtime.f35a2a91d37680127d85.js:1)
I have try out this solution also, without success: - https://www.npmjs.com/package/elements-zone-strategy
I'm new to Angular Elements, any help will be much appreciated.
