I have a simple microfrontend scenario that loads and embeds an angular 13 webcomponent (created with angular elements) in a container webapp.
Basically, the routing works fine. When leaving the route, the ng web components gets an ngOnDestroy
and is not part of the DOM anymore.
But, If I come back to this route, the angular web-component shows the last active route (seems to have some state), which does not reflect the URL browser location. If I manually reload the browser - the result is fine. It seems like the angular web-component does not get properly disconnected/destroyed when leaving the route. Is there any change to force this? So that on re-entering the route, everything look like being the first load (similar to browser refresh).
I was also strugling with same behaviour, and I found two workarounds for this.
replaceUrl
should clear the state of router. If second option is not working, try also adding:(
location
is Location class, not LocationStrategy)One more issue that I had with second option was that I had multiple calls to this component, so I needed to wrap navigation with setTimeout: