Menu
I created a small app using angular custom elements feature (element.js), imported that element.js file into another angular(parent) app in index.html, in development server (ng serve) element feature works fine, but in production mode (ng build --prod) getting this error in element.js file.
@angular/core": "~8.1.3", @angular/elements": "^8.1.3"
element (angular custom element code)
polyfills.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
app.module.ts
export class AppModule {
constructor(private injector: Injector) { }
ngDoBootstrap() {
const el = createCustomElement(NotificationElementComponent, {
injector: this.injector
});
// using built in the browser to create your own custome element name
customElements.define('test-card', el);
}
}
angular (parent app)
index.html
<!doctype html>
<html lang="en">
<body>
<app-root></app-root>
<script src="./assets/elements.js"></script>
</body>
</html>
polyfills.ts
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone'; // Included with Angular CLI.
(window as any).global = window;
app.component.html
<test-card [data]="{id:"foo"}"></test-card>
Error Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.).
756
To save yourself a load of headaches it's advisable to remove Zone when using Angular Elements and handle the change detection yourself.
platformBrowserDynamic()
.bootstrapModule(MainModule, { ngZone: 'noop'})
.catch(err => console.error(err));
Then make sure you remove it from your PolyFills.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
