single-spa-angular icon indicating copy to clipboard operation
single-spa-angular copied to clipboard

Second navigation in same app is always ignored

Open kentora opened this issue 1 year ago • 7 comments

Demonstration

I have a single-spa setup with a nav-app, app1 and app2. When i click a link for app1 in my nav-app, and then another link for another component in app1 from nav-app the navigation is ignored. This happens consitently, and only for the second navigation.

It seems to be releated to #113 as i can see that upon mounting app1 the first time, replaceState in extra-provider.ts is called, setting the flag skipNextPopState, which then causes the second navigation event to be ignored.

I'm unsure if the fix is needed with newer versions of single-spa, or the root cause has been fixed. I have not had any problems in commenting out the line setting the flag.

Expected Behavior

Navigation occurs

Actual Behavior

Navigation is ignored.

kentora avatar Oct 18 '24 06:10 kentora

Is this happening only for your app1 ? Have you setup emptyroutecomponent in your angular applications?

Arjun99 avatar Nov 16 '24 07:11 Arjun99

It seems to be pretty consistent, when navigation occurs within the active app. EmptyRouteComponent is correctly setup.

kentora avatar Nov 18 '24 07:11 kentora

Can you share your layout.html in the root-config file that you have created for the configuring the routes.

Arjun99 avatar Nov 18 '24 10:11 Arjun99

I have created a repo to reproduce this issue, thanks to @kfrederix for the base repo.

https://github.com/user-attachments/assets/c54a3e9b-a70f-426a-8f9f-73949a83bacd

https://github.com/sandeep-dxc/single-spa-angular-esm

pnpm i
pnpm dev
http://localhost:4300/

@joeldenning @arturovt Would you have any suggestions on how to resolve this.

Thanks.

sandeep-dxc avatar Nov 26 '24 15:11 sandeep-dxc

Hi Sandeep,

Let me check that and get back to you.

Arjun99 avatar Nov 26 '24 15:11 Arjun99

Hello @sandeep-dxc , I took a look at your repo => you can solve this issue by setting urlRerouteOnly to false in the host main.ts. E.g.

start({ urlRerouteOnly: false });

(I will add that also on my repo, because it's usually recommended to do that for Angular applications)

kfrederix avatar Nov 27 '24 12:11 kfrederix

Thanks @kfrederix, its working now 👍

sandeep-dxc avatar Nov 28 '24 05:11 sandeep-dxc