Skip to content

Browser Back Button not working #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davidmrhodes opened this issue Jan 30, 2024 · 8 comments
Open

Browser Back Button not working #451

davidmrhodes opened this issue Jan 30, 2024 · 8 comments

Comments

@davidmrhodes
Copy link

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
Copy link
Author

@manfredsteyer wonder if you can comment on this issue?

@RajathVenkatesh
Copy link

@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
Copy link

Can we get your help here please ? @manfredsteyer

@RajathVenkatesh
Copy link

@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
Copy link
Author

davidmrhodes commented Jun 14, 2024 via email

@RajathVenkatesh
Copy link

@manfredsteyer Can you please comment on this?

@GHamerschimidt
Copy link

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
Copy link

GHamerschimidt commented May 26, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants