Broken navigation after switching to lazy loaded pages

Hey there! I’m trying to switch my application to lazy loaded pages. For most of my pages this works fine, but I have some problems with tabbed and splitpane pages and I was hoping someone could point me in the right direction of what I’m doing wrong.

The Problem: My App has a sidemenu on the left which switches between the main pages of my app. The problem I have is that if I switch from a page with tab-layout to a page containing a split-pane the split-pane displays (on one side of the pane) the page that was last active in the tab-page instead of the page it is supposed to display. The main side of the split-pane shows the correct page. The same happens if I switch between 2 pages with tabbed-layout. In this case the active tab on the page I switched to still shows the tab that was active on the page I came from. Before I switched to lazy-loading everything worked fine.

If that helps the URLs in the browser are also wrong:

The URL of the page I’m coming from is: http://localhost:8100/#/tabbed-page1/tab1/page1
After switching to the second tabbed page the URL is: http://localhost:8100/#/tabbed-page2/tab1/page1 but it is supposed to be http://localhost:8100/#/tabbed-page2/tab1/page2

Anyone any idea?

When I click the tab after switching to the tabbed page it will load the correct content page.

we can not access your local address as you put localhost:8000

Of course not. I did just put those URLs there to showcase that the router somehow builds wrong URLs.

ok.But no such thing happens bcoz of lazy loading.please check the code again where you have written redirection and you placed pages names in strings correctly

Ok maybe something else ist wrong but it did work until I changed to lazy loading. I created a small sample project which showcases the behaviour.

The steps to reproduce are the following:

  1. Run the app using ionic serve and access it in the browser (in my case chrome)
  2. Use the menu to switch to the Tabs2 – So far everything is fine
  3. Switch back to Tabs --> Now I see the correct Tabs in the bottom but the displayed page is still page3 which was never supposed to be shown in Tabs
  4. If I now click Tab1 it loads the correct page which is Tab1

Something similar happens if I switch from Tabs to Tabs2 and then to the SplitPane. In this case the right side of the Splitpane shows Tab3.

I came to the conclusion that this must be a bug so I filed a bug report for the issue.

1 Like

I just found this same behavior, found this thread by searching to see if there was a solution, or if it was at least a known issue. Following on GH