Error: Cannot reattach ActivatedRouteSnapshot with a different number of children

[vahidvdn]

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?

[vahidvdn]

@NickIliev @tsonevn Any idea on this?

[jocafi]

same problem here, but I am using Angular 8.0

  {
    path: ':mode',
    loadChildren: () => import('./challenge-edit/challenge-edit.module').then( mod => mod.ChallengeEditModule)
  },

 "dependencies": {
        "@angular/animations": "~8.0.0",
        "@angular/common": "~8.0.0",
        "@angular/compiler": "~8.0.0",
        "@angular/core": "~8.0.0",
        "@angular/forms": "~8.0.0",
        "@angular/http": "~8.0.0-beta.10",
        "@angular/platform-browser": "~8.0.0",
        "@angular/platform-browser-dynamic": "~8.0.0",
        "@angular/router": "~8.0.0",
        "nativescript-angular": "~8.0.0",
        "nativescript-theme-core": "~1.0.6",
        "nativescript-ui-sidedrawer": "^6.0.0",
        "reflect-metadata": "~0.1.13",
        "rxjs": "~6.5.2",
        "tns-core-modules": "^5.4.1",
        "zone.js": "~0.9.1"
    },

JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR Error: Uncaught (in promise): Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78144:15) [angular]
JS:     at createNode (file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78129:13) [angular]
JS:     at file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78169:16 [angular]
JS:     at Array.map (<anonymous>) [angular]
JS:     at createOrReuseChildren (file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78152:26) [angular]
JS:     at createNode (file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78121:24) [angular]
JS:     at file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78158:28 [angular]
JS:     at Array.map (<anonymous>) [angular]
JS:     at createOrReuseChildren (file:///data/data/org.nativescript.nsngcourse/files/app/vendor.js:78152:...

[vahidvdn]

@jocafi Yes, unfortunately, there is no feedback from anyone. Hope this will be fixed in new Tab-View Redesign

[lostation]

@vahidvdn Are you using router-outlet or page-router-outlet ?
It seems page-router-outlet handles correctly this issue and router-outlet not...unfortunately.

[vahidvdn]

@lostation No, page-router-outlet doesn't handle it correctly. See here.
Also see the issue at the same repo.

[lostation]

Ok maybe it’s not related to type of router outlet in your case. Anyway, considering my issue, I’ve just replaced router outlet by page router outlet in my TabView’s children and the issue was gone. It has to be linked somehow… I also wonder if this issue could be related to a clearHistory = true … I will give a try. Sorry to be to not very useful … I’m still discovering NativeScript… Hope this bug will be fixed for TabView and its children’s routes of Nativescript v6 … wait and see. L.

[bpaczkowski-merix]

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);
  }

[mpilija]

Hi Guys,

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

[tskweres]

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

[phpdev90]

The same issue. Any idea?

[tskweres]

@bpaczkowski-merix solution with skipLocationChange in the transition worked for me

[alqabali]

some issue here!

[mhmdhmd]

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

[prajilshresthaiw]

+1 for this issue.

[prajilshresthaiw]

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.

[cjohn001]

+1 for the issue.
using
this.routerExtension.back({relativeTo: this.activatedRoute});
does not help.

[PetroSuch]

Any idea about it ?

[PetroSuch]

Guys, what is the solve of the problem /

[PetroSuch]

i dont can use bottomnavigation inside my application, because i can go to component Tabs and but i can return back to him from different component