After upgraded to NativeScript 3.2.0 - TypeError: Cannot read property 'reusedRoute' of undefined

[NickIliev]

From @shabib3 on September 7, 2017 22:16

Did you verify this is a real problem by searching [Stack Overflow]

Yes... I found this but this didn't work for me...plus it happens with the upgrading for the new version which not happened before

Tell us about the problem

After I upgraded the NativeScript to the new 3.2.0 version... It throw me the following error right after navigate with clearHistory: true property:
TypeError: Cannot read property 'reusedRoute' of undefined

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'reusedRoute' of undefined
JS: TypeError: Cannot read property 'reusedRoute' of undefined
JS:     at PageRouterOutlet.activateOnGoBack (file:///data/data/com.staccato.app/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:177:18)
JS:     at PageRouterOutlet.activateWith (file:///data/data/com.staccato.app/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:136:18)
JS:     at ActivateRoutes.placeComponentIntoOutlet (file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4526:16)
JS:     at ActivateRoutes.activateRoutes (file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4507:26)
JS:     at file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4443:58
JS:     at Array.forEach (native)
JS:     at ActivateRoutes.activateChildRoutes (file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4443:29)
JS:     at ActivateRoutes.activate (file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4417:14)
JS:     at file:///data/data/com.staccato.app/files/app/tns_modules/@angular/router/bundles/router.umd.js:4034:22
JS:     at SafeSubscriber._next (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/Observable.js:110:21)
JS:     at SafeSubscriber.__tryOrSetError (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/Subscriber.js:247:16)
JS:     at SafeSubscriber.next (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/Subscriber.js:187:27)
JS:     at Subscriber._next (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/Subscriber.js:125:26)
JS:     at Subscriber.next (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/Subscriber.js:89:18)
JS:     at MapSubscriber._next (file:///data/data/com.staccato.app/files/app/tns_modules/rxjs/operator/map.js:83:26)

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.0
• Cross-platform modules: 3.2.0

Copied from original issue: NativeScript/NativeScript#4813

[NickIliev]

From @smarza on September 8, 2017 19:6

Same issue here after updating to 3.2.0.

In my case it happens right after the AuthGuardService returns true to canActivate.

Important: the error only occurs on Android.
IOS is running ok in the same project.

thanks

[NickIliev]

From @shabib3 on September 8, 2017 20:37

@smarza Someone told me to upgrade the nativescript-angular... I'll try it only tomorrow on my project... But it would be great if you will try it and let us know if it worked! :)
Thanks!

[NickIliev]

From @smarza on September 8, 2017 21:19

@shabib3

After some tryings...
npm uninstall nativescript-angular

npm install nativescript-angular@4.3.0-2017-9-7-3 (latest, but didn't worked)
npm install nativescript-angular@4.3.0-2017-8-30-3 (worked so far)

I'm going to do more tests, but I definitely recommend you to try with nativescript-angular@4.3.0-2017-8-30-3.

Let me know if it helped you.

Thanks!

[NickIliev]

From @shabib3 on September 9, 2017 21:2

@smarza
OK so I tried 2 things:

• updated all the @angular dependencies (from "~4.1.0" to "~4.2.0") and the nativescript-angular to 4.2.0 (the last stable version) - Didn't do the work for me.
• updated the nativescript-angular to 4.3.0-2017-8-30-3 (npm install nativescript-angular@4.3.0-2017-8-30-3) like you said - but also without success

There is any idea?

[micflan]

+1, this is a big issue in our app at the moment.

[smarza]

@micflan
For sure, it is.

I had to postpone some updates in my apps because of that.

Hope for a solution any time soon.
Regards

[bzaruk]

@NickIliev How can we proceed investigate this issue?

Thanks! :)

[NickIliev]

Hey, @micflan @shabib3 @smarza are you guys still reproducing this issue?

I have created this test application and using clearHistory (set to true) is working as expected on my side.
Do let me know if you have a code sample that can still reproduce the issue.

Here is the versioning I have used for all Angular dependencies.

[bzaruk]

@NickIliev
Hey it is kind of difficult bug to debug...I can suggest that we will do a screen share / video chat to investigate this issue together...what do you say? :)

[bzaruk]

@NickIliev
I continue to check this issue and I found out that is happening in the following case:

• page1 navigate to page2 with the following metadata { transition: { name: "slideLeft", curve: "linear" } }
• page2 navigate to page3 with the following metadata { clearHistory: true }

[echap]

Same here, it happens with the case of @shabib3 :

page2 navigate to page3 with the following metadata { clearHistory: true }

It does that for any page I want to clear history of.

[echap]

Any update/workaround on this ?

[ShawnPavel]

I am experiencing a similar issue after an update to 3.2.0. When navigating using clearHistory: true I got the following error and was left with a blank white screen. This occurred for me only on Android.

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'key' of undefined
JS: TypeError: Cannot read property 'key' of undefined
JS:     at NSRouteReuseStrategy.shouldAttach (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/nativescript-angular/router/ns-route-reuse-strategy.js:64:55)
JS:     at ActivateRoutes.activateRoutes (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/@angular/router/bundles/router.umd.js:4743:45)
JS:     at file:///data/data/com.liveshopper.mobile/files/app/tns_modules/@angular/router/bundles/router.umd.js:4715:58
JS:     at Array.forEach (native)
JS:     at ActivateRoutes.activateChildRoutes (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/@angular/router/bundles/router.umd.js:4715:29)
JS:     at ActivateRoutes.activate (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/@angular/router/bundles/router.umd.js:4608:14)
JS:     at file:///data/data/com.liveshopper.mobile/files/app/tns_modules/@angular/router/bundles/router.umd.js:4185:22
JS:     at SafeSubscriber._next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Observable.js:224:21)
JS:     at SafeSubscriber.__tryOrSetError (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Subscriber.js:247:16)
JS:     at SafeSubscriber.next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Subscriber.js:187:27)
JS:     at Subscriber._next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Subscriber.js:125:26)
JS:     at Subscriber.next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Subscriber.js:89:18)
JS:     at MapSubscriber._next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/operator/map.js:83:26)
JS:     at MapSubscriber.Subscriber.next (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/Subscriber.js:89:18)
JS:     at MergeMapSubscriber.notifyNext (file:///data/data/com.liveshopper.mobile/files/app/tns_modules/rxjs/operator/mergeMap.js:143:30)

I was able to resolve it by adding an animation to the navigation oddly enough.
Before:
this.routerExtensions.navigate(['/myPage'], { clearHistory: true } });
After:
this.routerExtensions.navigate(['/myPage'], { clearHistory: true, transition: { name: 'fade' } });