2

We created a Web Component with Angular Elements built with v9. Applying noop on ngZone when bootstrapping the module.

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    ngZone: 'noop'
  })

Create a script that concatenates core-js polyfills and webcomponents.js (in-order) from:

  • src/js/core-js/minified.js
  • node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js
  • node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js
  • es5 bundle

Reasons for doing these are:

  • We need to support IE11 (core-js polyfill)
  • We need to use shadow dom (webcomponents-bundle.js)

When injected the generated web component script to my Angular 7 app running with ZoneJS. After that, all change detection is not working anymore on the App. Click's won't work, Angular Lifecycle hooks won't trigger as expected (ex. it trigger when changing route because of ApplicationRef.tick() being called by globalZoneAwareCallback).

I'm having a hard time debugging this and knowing the root cause. I was initially thinking on my Angular App to subscribe to route events and triggering the tick(). https://github.com/angular/angular/issues/34150

But I want to know the root cause of this. If anyone could give insight, I would really appreciate it.

tedian_dev
  • 54
  • 4

1 Answers1

0

What we did to fix:

  1. Downgrade to Angular 7 since most of our apps use Angular 7 and will have ZoneJS conflicts if the web component is Angular 9.
  2. Revert back to the Default Change Detection Strategy
  3. Re-added the ZoneJS to web component
  4. Revert ngZone setting to default instead of noop
  5. Create separate javascript build dedicated for IE (es5) since the differential build is still not available to Angular 7.
  6. ViewEncapsulation is Emulated for IE and ShadowDOM for modern browsers.
tedian_dev
  • 54
  • 4