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?

@NickIliev

@NickIliev @tsonevn Any idea on this?

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:...

@jocafi

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

@vahidvdn

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

@lostation

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

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.

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

Hi Guys,

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

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

The same issue. Any idea?

@bpaczkowski-merix

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

some issue here!

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

+1 for this issue.

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.

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

Any idea about it ?

Guys, what is the solve of the problem /

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

Navigation Menu

Repository navigation

Error: Cannot reattach ActivatedRouteSnapshot with a different number of children #1830

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error: Cannot reattach ActivatedRouteSnapshot with a different number of children #1830

Description

Activity

vahidvdn commented on Jun 12, 2019

jocafi commented on Jun 20, 2019

vahidvdn commented on Jun 25, 2019

lostation commented on Jun 27, 2019

vahidvdn commented on Jun 29, 2019

lostation commented on Jun 30, 2019

bpaczkowski-merix commented on Jul 14, 2019

mpilija commented on Jul 16, 2019

tskweres commented on Sep 6, 2019

phpdev90 commented on Sep 10, 2019

tskweres commented on Sep 10, 2019

alqabali commented on Dec 12, 2019

mhmdhmd commented on Dec 31, 2019

prajilshresthaiw commented on Jun 22, 2020

prajilshresthaiw commented on Jul 27, 2020

cjohn001 commented on Aug 22, 2020

PetroSuch commented on Mar 24, 2021

PetroSuch commented on Mar 24, 2021

PetroSuch commented on Mar 24, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions