RouterExtension navigating back causes crash

[TheOnlyMatt]

Hello,

I am currently facing an issue when I want to navigate back to my main page.
Here is my code :

MAIN PAGE

constructor(private routerExtensions : RouterExtensions)

ngOnInit(): void {

       //Ouvre le tutoriel à la première ouverture de l'application
       this._userInfo.checkFirstOpening().then(value => {
           if(value != true){
               console.log("opening tuto")
               this.routerExtensions.navigate(["/tutorial"],  {
                   transition: {
                       name: "fade",
                       duration: 300
                   }
               })
           }
           else
               console.log("not first launch")
       })
}

CHILD PAGE

import { RouterExtensions } from "nativescript-angular/router";

export class TutorialComponent implements OnInit{
 constructor( private routerExtensions : RouterExtensions, private page: Page) {}

    closeView(){
        console.log("going back")
        this.routerExtensions.backToPreviousPage();
    }
}

So my tutorial component is well opened after the navigation from the main page.
But when I want to go back from the tutorial page to the main page, I have a blank screen, and this error in logs :

CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1466:24: ERROR Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'this.cache.peek().key')
        shouldAttach@file:///app/tns_modules/nativescript-angular/router/ns-route-reuse-strategy.js:67:55
        activateRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5741:57
        file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5702:33
        forEach@[native code]
        activateChildRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5701:36
        activate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5561:33
        file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5474:30
        file:///app/tns_modules/rxjs/Observable.js:225:25
        __tryOrSetError@file:///app/tns_modules/rxjs/Subscriber.js:248:20
...

No matter if I do "backToPreviousPage()" or simply "back()" the crash occurs.
When doing this.routerExtensions.canGoBack(), I receive false, as if I was not allowed to navigate back.

Why is this happening, while I am not event clearing the navigation history on first navigate ?

[NickIliev]

@TheOnlyMatt please provide a sample project or Playground demo demonstrating the issue so we could investigate further.

For your convenience, I have created this basic demo Playground trying to reproduce the above scenario but everything works on my side,.

[TheOnlyMatt]

I have a sample project, and doing the same thing, to navigate programmatically to a view then go back manually works well. So the problem must be specific to my project.

Do you want me to share some other info about my project ?

[kaurag007ph]

I'm having the same issue. It happens when you swipe back and release it before halfway. And when you press the button with this.routerExtensions.backToPreviousPage();.

The (evaluating 'this.cache.peek().key') issue occurs.

[TheOnlyMatt]

I am still investigating, but I suspect that my main component is instantiated twice, which might cause this conflict when navigating back. I have a log in my login component which should be shown just once when opening my main component, but instead it is shown twice.
Thus, as my main component is duplicated, that would explain why when going back on a child component, Nativescript would not know on which of my two main component navigate.

[NickIliev]

@TheOnlyMatt yes if you have sample project send me a link (GitHub or Playground) or an archive (no node_modules and platforms folder to decrease the size)

[TheOnlyMatt]

I resolved my double component init, and the problem is still there, so it was not the cause.
I have a sample project but it is working fine on this point, so I don't think it is very useful to send you a sample project if it is working

[TheOnlyMatt]

Feels like it is something related to this issue.
I noticed this problem is happening elsewhere in my app, when I use the navigation drawer.

Here is a brief storyboard :

• At app launch, user is on the login page.
• After login page, the user gets redirected to the main page with the clear history parameter.
• If I go to a page with the navigation drawer, I can't go back <- This is the issue.
• Same probleme with my TutorialComponent
• If I go to the same page with a link on the main page, I can go back

I tried to remove the clear history parameter at the navigation from the login page, and the issue disapeared. But the problem is that the user could land on the login page with the back button, but I don't want to enable this without going throught the log out process.

Here is my app routing module, the problem might come from here :

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { PreloadAllModules } from "@angular/router";

import { LoginComponent } from "./login/login.component";
import { HomeComponent } from "./home/home.component";
import { SearchComponent } from "./search/search.component";
import { TutorialComponent } from "./tutorial/tutorial.component";

export const routes: Routes = [
    { path: "", component : LoginComponent},
    { path: "home", pathMatch: "full", component : HomeComponent },
    { path: "search", component : SearchComponent },
    { path: "tutorial", component : TutorialComponent }
];

export const navigatableComponents = [
    LoginComponent,
    HomeComponent,
    SearchComponent,
    TutorialComponent
];


@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
    exports: [NativeScriptRouterModule],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppRoutingModule { }

Can you tell me if there is an error in here ?

[TheOnlyMatt]

Any news about this ?

[gsmedley]

Looks like this is the same as:

Occasional crash in NSRouteReuseStrategy.shouldAttach()

[thaoula]

Hi Guys,

Any news on when this will be resolved?

We are using Nativescript 4 rc and still get this error.
evaluating 'navController.viewControllers'

Its definitely related to clearhistory: true.

Regards,
Taek

[gsmedley]

This problem only showed up for me during stress testing and I have not seen it since I added a check to canGoBack() before calling back(). I never had a way to easily reproduce it though, so I'm not sure if it will help in the cases above. My stress test was tapping the back button several times quickly.

[hamidbsd]

Any updates on this issue?

Doing a canGoBack() check before back() fixes it for as long as the app is handling the the navigation. But if you do a stress test using the device back button, the app will always crash!

[kvindascr]

Hello Guys,

Just wanted to add my 2 cents here.

We have this issue on an app.

The basic scenario is the following.

• We have a login screen. If token present, it will route to home screen (A) clearing history.
• When a user receives a push notification we cache the intended action.
• On home screen we validate if there is any pending push-not action, and if pending we redirect the user to another screen (B).
• There are a couple of edge cases where a user can get to screen B with some invalid data, in that case, we return them to the home screen, and the crash occurs.

I have also tested the canGoBackPreviousPage() and canGoBack() without success, because in my case they return true although when I return the application crashes with the exception.

We are using NS+Angular.

What I have noticed is that whenever this flow occurs relatively quickly and automatically, the crash occurs.

But if we reimplement the same flow via manual actions (buttons) everything works fine.

So it makes me think this is a timing issue.

I have also seen that my home component gets destroyed when I route to screen B.

I have confirmed the ngOnDestroy is called.

So my hypothesis at the moment is that something is not yet fully initialized in the home screen by the time we request the routing to the other screen.

That causes some issue while doing the routing and the screen is destroyed.

Later on, when trying to return to the previous page home, the history is in an inconsistent state because the component was destroyed.

So what I'm able to deduct in my case, is that the issue is caused by a mix between the original component being destroyed, and the navigation expecting it is still present.

Finally, I was able to work around it, by doing the routing in the page navigatedTo event and adding a setTimeout of 1 second.

I'm not a fan of this solution but is the only way I have been able to make the code work and avoid the crash.

Hope this provides some light on the issue.