Broken navigation after switching to lazy loaded pages

Ionic Framework ionic-v3
1

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?

2

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

3

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

4

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

5

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

6

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.

7

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

1 Like
8

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