Browser Back Button not working

[davidmrhodes]

I am have problems getting the browser back and forward button working in and MFE. I think there is a bug in the
following function in this file:

https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/src/lib/web-components/router-utils.ts

export function connectRouter(router: Router, useHash = false): void {
let url: string;
if (!useHash) {
url = ${location.pathname.substring(1)}${location.search};
router.navigateByUrl(url);
window.addEventListener('popstate', () => {
router.navigateByUrl(url);
});
} else {
url = ${location.hash.substring(1)}${location.search};
router.navigateByUrl(url);
window.addEventListener('hashchange', () => {
router.navigateByUrl(url);
});
}
}

When I change it to this:

export function connectRouter(router: Router, useHash = false): void {

let url: string;
if (!useHash) {
    url = `${location.pathname.substring(1)}${location.search}`;
    router.navigateByUrl(url);
    window.addEventListener('popstate', () => {
        url = `${location.hash.substring(1)}${location.search}`;
        router.navigateByUrl(url);
    });
}
else {
    url = `${location.hash.substring(1)}${location.search}`;
    router.navigateByUrl(url);
    window.addEventListener('hashchange', () => {
        url = `${location.hash.substring(1)}${location.search}`;
        router.navigateByUrl(url);
    });
}

}

Subtle change but url should be recalculated in the addEventListener.

I think this change would better match with the code in the article:

https://www.angulararchitects.io/en/blog/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly/ under the section "Several Routers must Work Together"

[davidmrhodes]

@manfredsteyer wonder if you can comment on this issue?

[RajathVenkatesh]

@davidmrhodes

This issue is long standing. I've raised a PR for this #424
Hopefully it's merged and can be fixed in a future release.

[RajathVenkatesh]

Can we get your help here please ? @manfredsteyer

[RajathVenkatesh]

@davidmrhodes

Have you figured a workaround for this?

I have raised this issue for a year now here and it's not being looked at, I've even raised a PR as well with a suggested fix but still nothing has been done so looking for options now.

[davidmrhodes]

No have not got a fix. David M. Rhodes / Senior Software Engineer <https://www.linkedin.com/in/david-m-rhodes>

…

On Wed, Jun 12, 2024 at 9:38 PM RajathVenkatesh ***@***.***> wrote: @davidmrhodes <https://github.com/davidmrhodes> Have you figured a workaround for this? I have raised this issue for a year now here and it's not being looked at, I've even raised a PR as well with a suggested fix but still nothing has been done so looking for options now. — Reply to this email directly, view it on GitHub <#451 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF6PDXFVVULCWLFKYVUIHO3ZHEH47AVCNFSM6AAAAABCQWQBJGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRUGMYDAMBYGM> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[RajathVenkatesh]

@manfredsteyer Can you please comment on this?

[GHamerschimidt]

We are facing the same issue, it would seem it has not been resolved? Is there a problem with the PR submitted beforehand that we can help fix, or any other way we can help on fixing this issue?

[GHamerschimidt]

We found a way to bypass this issue on our solution.
On bootstrap, instead of setting the appType as microfrontend, we set it as something else:

bootstrap(RootModule, {
	production: true,
	appType: '' as unknown as AppType, // set appType as anything but microfrontend or shell (only on remotes)
});

Then, inside the app.component.ts, we do the following:

export class AppComponent implements OnInit, OnDestroy {
	private readonly router = inject(Router);

	private readonly handlePopState = () => {
		this.router.navigateByUrl(\`${location.pathname.substring(1)}${location.search}\`).catch((error) => {
			// there is an issue that it raises an error as it tries to go to a url of another webcomponent, but it appears to not affect anything, as the other one has this implementation as well and resolves when it gets there, so we decided to suppress the error for now
		});
	};

	ngOnInit(): void {
		this.router.navigateByUrl(`${location.pathname.substring(1)}${location.search}`);
		window.addEventListener('popstate', this.handlePopState);
	}

	ngOnDestroy(): void {
		window.removeEventListener('popstate', this.handlePopState);
	}
}

That way it will not affect other mfes when it changes route, and will safely dispose of the event listener.