Reset Angular router state in webcomponent (angular elements)

Question

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).

Answer 1

I was also strugling with same behaviour, and I found two workarounds for this.

1. Redirect to home page if location.path() is not set

export class AppComponent {
    constructor (private router: Router, private location: Location) {
        this.router.initialNavigation()
        if (!this.location.path()) {
          this.router.navigate(['']).then()
        }
      }
    }

2. Create JumpOff page from which you will navigate to other webcomponents. When you get back to this JumpOff page/component, clear state in moment of navigation to 'home'

constructor (private readonly router: Router) {
    if (navigation_from_external_webcomponent) {
        this.router.navigate([''], { replaceUrl: true }).then()
    }
}

replaceUrl should clear the state of router. If second option is not working, try also adding:

    this.location.replaceState('')

( 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:

    setTimeout(() => {
        this.router.navigate([''], { replaceUrl: true }).then()
    })