first the code is available at Github here:
Sadly I did not get a stackblitz version running, but locally, after a clone, npm install and ng serve it should run fine.
About the general structure:
The Project shows an example of a WebComponent exposed by an Angular App via Elements.
The WebComponent is used in the index.html, which is referred as container Application.
The use case here is a little bit constructed, but the navigation that occurs, when clicking
on the two top bottoms is comparable to the real world use case.
Normally this WebComponent would have been used in an AngularJS legacy Application. Since there are many overlappings between the two root views (overview1 overview2) it is used in two AngularJS components, in between ui-router handled navigation. This means, that exactly this constructed actions happen. The DOM Elements will be deleted and readded.
So basically the problem is:
If I am deleting DOM Elements of a WebComponent (so deleting the CustomElement itself) from external, and then readding it with another route. The Child-route components of this will not get loaded. If there is a short dealy (50ms) everything works fine.
To reproduce the problem:
1. Load page and click an the “switch with delay” button.
2. Reveael Detail Component
3. Switch to the other Overview by clicking swtich with delay again.
4. Reveal Detail Component
=> Everything should work fine
Repeat the same steps, but this time click only on “switch directly”.
What I already debugged is the Router. So I went through the log messages with “enable tracing”
and they seemed to be no differences. Afterwards I compared the Components Lifecycle and
the thing I noticed is, that in the working example the old Detail1Component Object will get destroyed a new Detail1Component one will be created and directly destroyed afterwards and then everything regarding the Detail2Component will get constructed.
On the not working example it is like this:
A new Detail1Component will get constructed again and destroyed afterwards. Then the old Detail1Component will get destroyed. Then nothing regard the Detail2Component will get constructed.
So routing seems to work fine, but components won’t get loaded in this case, maybe due to a strange lifecycle, because of the Detachment of the View to the ViewModel happening due to hard deleting those WebComponent in DOM.
Maybe I am just dumb and did something fundamentally wrong, but I could not find anything in the Web regarding this problem and every solution I tried by myself just resulted in a workaround like establishing a delay.
tl;dr Deleting the DOM Element of a custom Element created with Angular Elements will lead to sub-routers not loading components
Source: New feed
Source Url Angular Elements WebComponents external DOM Changes