Ionic-framework: bug(navigation) Ionic V3 Lazy Loading + DeepLinking with ion-tab don't work after the browser page is refreshed

[Jun711]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[X] 3.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I have followed the steps suggested to set up lazy loading of pages and pipes. It works as expectedly on Google Chrome. However, when I hit the refresh button, there seems to be something wrong with deeplinking and ion-tab's cleanup function(see the error message). It cannot reload the page unless I recompile the code

Expected behavior:

Hitting the refresh button on Google Chrome should produce the same result as loading the app from the beginning

Steps to reproduce:

The landing page of the app is a tab-ion directive. All the tabs are lazy loaded. After refreshing the page on a browser, the app won't work at all.

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.0-beta.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.5-201704040558
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v7.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Error messages:
TypeError: Cannot read property 'indexOf' of null
    at Tab.NavControllerBase._cleanup (http://localhost:8100/build/main.js:63214:59)
    at Tab.NavControllerBase._transitionFinish (http://localhost:8100/build/main.js:63116:18)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14529)
    at Object.onInvoke (http://localhost:8100/build/main.js:4499:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14469)
    at n.run (http://localhost:8100/build/polyfills.js:3:9741)
    at NgZone.run (http://localhost:8100/build/main.js:4368:62)
    at Array.<anonymous> (http://localhost:8100/build/main.js:63064:25)
    at MDTransition.Animation._didFinish (http://localhost:8100/build/main.js:36299:29)
    at MDTransition.Animation._playProgress (http://localhost:8100/build/main.js:35638:18)
    at MDTransition.Animation._playDomInspect (http://localhost:8100/build/main.js:35603:14)

I posted on this thread also:

ionic forum thread

[jgw96]

Hello, thanks for using Ionic! Do you have a repo we could use to reproduce this issue?

[jgw96]

Also, would you mind taking a look at this branch of the conf app and comparing our lazy loading setup to yours? It uses tabs so it should be a good example for you. Also, i cannot reproduce the issue in that app.

[Jun711]

thank you. I will compare and see. The setup looks quite similar at the moment.

Btw, I discovered another issue for conference app. When you refresh at the map page on the master branch, you will see the following issue:

ReferenceError: google is not defined
at SafeSubscriber._next (http://localhost:8100/build/main.js:45408:27)
at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:40452:16)
at SafeSubscriber.next (http://localhost:8100/build/main.js:40401:22)
at Subscriber._next (http://localhost:8100/build/main.js:40343:26)
at Subscriber.next (http://localhost:8100/build/main.js:40307:18)
at MapSubscriber._next (http://localhost:8100/build/main.js:81167:26)
at MapSubscriber.Subscriber.next (http://localhost:8100/build/main.js:40307:18)
at MapSubscriber._next (http://localhost:8100/build/main.js:81167:26)
at MapSubscriber.Subscriber.next (http://localhost:8100/build/main.js:40307:18)
at XMLHttpRequest.onLoad (http://localhost:8100/build/main.js:58552:38)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4415:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at XMLHttpRequest.invoke (http://localhost:8100/build/polyfills.js:3:16170)

[Jun711]

I somehow able to reproduce it on the conference app by setting break points on some of the lines at isActive function of app.component.ts. Specifically, I set break points at line "if (childNav)" of that function. It seems to be loading the components. After resuming execution and stepping over for a while (I removed the break points in the middle of the process), I got the same error trace which affects my app.
On the other hand, clicking the refresh button only causes this error once in a while less than 5% but it did happen.

However, on my app, it happens almost every time refresh button is clicked. The lazy loading part is setup is similar to what you have on the conference page.

[Jun711]

Hi Justin, is there any update on this? Thanks!

[jgw96]

Hello @Jun711 , sorry for the delay. We are currently working on hardening the NavController for lazy loading and you can expect some improvements in the next release. Unfortunately, because there does not seem to be a hard repro case for this issue at the moment I am going to close this issue for now.

[Jun711]

Hi @jgw96 After updating to 3.2.0, I haven't seen the error messages so far.

[syeddiwan]

Hi @jgw96, It's that issue resolved in latest ionic release ?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.