Browser Back Button not working

davidmrhodes commented 9 months ago

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 commented 8 months ago

@manfredsteyer wonder if you can comment on this issue?

RajathVenkatesh commented 8 months ago

@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 commented 7 months ago

Can we get your help here please ? @manfredsteyer

RajathVenkatesh commented 5 months ago

@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 commented 5 months ago

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 https://github.com/angular-architects/module-federation-plugin/issues/451#issuecomment-2164300083, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF6PDXFVVULCWLFKYVUIHO3ZHEH47AVCNFSM6AAAAABCQWQBJGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRUGMYDAMBYGM . You are receiving this because you were mentioned.Message ID: @.*** com>

RajathVenkatesh commented 5 months ago

@manfredsteyer Can you please comment on this?

angular-architects / module-federation-plugin

Browser Back Button not working #451