fix(zone): always run in zone for angular micro-frontends#2
fix(zone): always run in zone for angular micro-frontends#2remackgeek merged 6 commits intoremackgeek:masterfrom
Conversation
|
@tnicola , I'm glad someone else found this useful!
|
|
@remackgeek Thank you for your comments.
|
|
@tnicola, I'm happy to take the change, but I want to keep my simple shell example. If you want to change your PR down to just the code change, I'll do the merge. If you don't want to bother with that, I can just make the change myself. Either way it will probably be a few days until I can get to it. |
|
Also, you might be interested in this angular bug which is mostly the same issue: Hosting a Web Component inside an angular app. Data binding and change tracking is not working. #24901 |
|
@remackgeek Thanks! the demo was just to show you the issue and the resolution. I removed the example, the PR is updated. |
|
@tnicola , I merged your change and published version 6.0.4. I hope it works for you. |
|
@remackgeek It works great! 🎉 Thanks!! |
2 participants
Hi @remackgeek ,
First of all, I would say thanks to you. You saved my life, great work!
I'm going to open this PR to fix all the cases in which we're importing elements created and defined in a
external Angular micro-frondend.Issue: Change Detection fails for Angular micro-frontends.
Maybe you're familiar with micro-frondents but for who don't know it's a technique in which a web app is a composition of features which are owned by independent teams (see https://micro-frontends.org/ for more details).
I tried to replicate a Micro-fronteds architecture in which, there is an Angular
Hostapplication and some other Angular components (my-custom-elements) created via @angular/elements. I'm importing the two elements from here: https://github.com/tnicola/my-custom-element but there's a problem, also with your library the change detection doesn't work for these external elements. This is due to theNgZone.isInAngularZone()check done at this line:elements-zone-strategy/projects/elements-zone-strategy/src/lib/element-zone-strategy.ts
Line 32 in a485d15
Since we have two 2 Angular apps, the
hostandmy-custom-elements, there will be also 2 NgZones and 2 ApplicationRefs, each app has it own. So,isInAngularZone()will return true formy-custom-elementseven if we are in the Host NgZone (this is due because for each angular app a zone with 'angular' name is created and isAngularZone checks if there is at least one zone called 'angular'). What we need to get change detection working is to enter inmy-custom-elementszone.Removing the
NgZone.isInAngularZone()check, as suggested in the PR won't break nothing in all the other cases and it would cost zero. If we already are in a zone, re-enter in the same zone is a noop operation.Let me know if it's clear what I wrote. Thanks!