nativescript-angular: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children

Here is my routing:

const routes: Routes = [

    {
        path: "",
        redirectTo: "/tabs/default",
        pathMatch: "full"
    },
    {
        path: "tabs",
        loadChildren: "~/app/modules/tabs/tabs.module#TabsModule"
    },
    {
        path: "login",
        loadChildren: "~/app/modules/login/login.module#LoginModule"
    },
    {
        path: "register",
        loadChildren: "~/app/modules/register/register.module#RegisterModule"
    }

];

The scenario which leads to the error: First the app starts with tabs route, then I go to the login page, after that I go to register and then again I go to tabs page (and clean the history). After that if I go to login page again and get back to previous one (tabs page), the error occurs.

The error:

JS: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1950:19) [angular]
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1954:13) [angular]
JS:     at createNode (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1935:17) [angular]
JS:     at file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1975:20 [angular]
JS:     at Array.map (<anonymous>) [angular]
JS:     at createOrReuseChildren (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1958:30) [angular]
JS:     at createNode (file:///data/data/org...

Any idea?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 2
Comments: 19

Most upvoted comments

Hi Guys,

Any news on this? Got the same issue while navigating back: this.routerExtensions.back();

mpilija on Jul 16, 2019

I’m not sure if it will be helpful but in my case, the solution to this error was to use the additional parameter skipLocationChange in options of navigate method.

Eg.

navigateToHome() {
    const navigationOptions: any = {
      clearHistory: true,
      animated: false,
      skipLocationChange: true
    };

    return this.routerExtensions.navigate([''], navigationOptions);
  }

bpaczkowski-merix on Jul 14, 2019

while navigating back use extra option in this.routerExtension.back() use the following

this.routerExtension.back({relativeTo: this.activatedRoute});

i hope it handles correctly this issue

This worked for me.

prajilshresthaiw on Jul 27, 2020

while navigating back use extra option in this.routerExtension.back() use the following

this.routerExtension.back({relativeTo: this.activatedRoute});

i hope it handles correctly this issue

mhmdhmd on Dec 31, 2019

Same issue when using this.routerExtensions.back() with lazy-loaded tab routes

tskweres on Sep 6, 2019