Cannot reattach ActivatedRouteSnapshot created from a different route #1993

imerljak · 2019-09-26T21:25:18Z

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

✔ Component nativescript has 6.1.2 version.
✔ Component tns-core-modules has 6.1.1 version.
✔ Component tns-android has 6.1.1 version.
✔ Component tns-ios has 6.1.1 version.

Describe the bug
Bug type: Runtime

I get this error consistently (but i couldn't pinpoint the reason so it seems to be a bit random).
I have a simple routing schema with lazy modules, and inside such a module i have a couple of routes that are related (not children). The error occurs at times when I'm navigating between these routes, it seems to be triggered more often if I try to navigate as fast as possible without giving the page much time to live between changes.

To Reproduce
Navigate between sibling routes.

Expected behavior
Should navigate correctly but it crashes at times with an exception and render the route inaccessible until reloading the module by navigating away from it and back again.

Sample project
Sample project can be found here

Additional context

StackTrace

ERROR Error: Uncaught (in promise): Error: Cannot reattach ActivatedRouteSnapshot created from a different route
Error: Cannot reattach ActivatedRouteSnapshot created from a different route
    at setFutureSnapshotsOfActivatedRoutes (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80712:15) [angular]
    at createNode (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80700:13) [angular]
    at file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80740:16 [angular]
    at Array.map (<anonymous>) [angular]
    at createOrReuseChildren (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80723:26) [angular]
    at createNode (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80692:24) [angular]
    at file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80729:28 [angular]
    at Array.map (<anonymous>) [angular]
    at createOrReuseChildren (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80723:26) [angular]
    at createNode (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80692:24) [angular]
    at createRouterState (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:80684:16) [angular]
    at MapSubscriber.project (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:82816:41) [angular]
    at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:108574:35) [angular]
    at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (file:///data/data/br.com.dbsystem.apptransportadoras/files/app/vendor.js:103816:18) [angular]

Routing Definitions

app-routing.module.ts

const routes: Routes = [
    {path: '', redirectTo: 'tracking', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {
        path: 'tracking',
        loadChildren: () => import(`~/app/components/tracking/tracking.module`).then(m => m.TrackingModule),
        canActivate: [AuthGuard],
        canLoad: [AuthGuard]
    },
  /* ... ommitted similar routes */
}

tracking-routing.module.ts - That's where I'm having trouble with navigation.

const routes: Routes = [
    {path: '', component: TrackingComponent},
    {
        path: ':id',
        component: DadosGeraisComponent,
        resolve: {
            tracking: TrackingDetailResolverService
        }
    },
    {
        path: ':id/manifestos',
        component: TrackingManifestosComponent,
        resolve: {
            // tracking: TrackingDetailResolverService
        }
    },
    {
        path: ':id/conhecimentos',
        component: TrackingConhecimentosComponent,
        resolve: {
            // tracking: TrackingDetailResolverService
        }
    },
    {
        path: ':id/eventos',
        component: TrackingEventosComponent,
        resolve: {
            // tracking: TrackingDetailResolverService
        }
    }
];

The text was updated successfully, but these errors were encountered:

tsonevn · 2019-10-01T05:39:24Z

Hi @imerljak,
Can you send us the project or sample one, where it is demonstrated your case and the problem can be reproduced?

imerljak · 2019-10-07T11:47:00Z

@tsonevn Sorry I dont have the available time right now to provide a sample project. As soon as i am able i will see it done. Thanks.

imerljak · 2019-10-07T21:13:38Z

@tsonevn I've edited the issue with the sample project repo.

I've created a simple project based on the Sidebar template (same I've used before).

While setting up the sample project I could narrow the problem down to the Angular Resolve. The issue happens only when I'm using a resolver to fetch the route data. Causing the exception consistently whenever I keep navigating between the 'resolved' route and its siblings.

At first I thought the cause might be because I'm reusing the resolver service in multiple routes, but that was not the case while testing the sample. The exception is present even if only one route has a resolve.

One more thing that I detected, is that (as you'll be able to see on the project) there's not even the need to subscribe to the activatedRoute.data to trigger the exception. Just registering the resolver on the route causes this error.

vahidvdn · 2019-10-10T11:06:28Z

hey @imerljak
Does it relate to my issue? #1830

imerljak · 2019-10-10T12:10:48Z

@vahidvdn I believe not (not directly at least).
Although it is related to the same class [ActivatedRouteSnapshot] this is happening only when I have a resolver on my routes.

tsonevn · 2019-10-23T07:06:57Z

Hi @imerljak,
Excuse me for the delay in reply.
I tested the provided sample project and was able to recreate the problem. On that matter, I marked the issue as a bug. You can keep track of the issue for further info.

SmailHammour · 2019-12-17T12:38:08Z

What's the status on this?

sashok1337 · 2020-04-23T10:43:25Z

Any progress here? It's very annoying bug :(

vietlongn · 2020-06-18T03:40:39Z

any update please

prajilshresthaiw · 2020-07-27T12:20:33Z

ANy info? @tsonevn

Flippsor · 2021-05-31T14:13:12Z

Having trouble with this problem, too. Any news?

project-bot bot added this to Inbox in Plugins Team Sep 26, 2019

tsonevn added the needs more info label Oct 1, 2019

tsonevn added bug router and removed needs more info labels Oct 23, 2019

edusperoni linked a pull request Oct 19, 2020 that will close this issue

fix: Cannot reattach ActivatedRouteSnapshot created from a different … #2279

Draft

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

imerljak commented Sep 26, 2019 •

edited

tsonevn commented Oct 1, 2019

imerljak commented Oct 7, 2019

imerljak commented Oct 7, 2019 •

edited

vahidvdn commented Oct 10, 2019

imerljak commented Oct 10, 2019 •

edited

tsonevn commented Oct 23, 2019

SmailHammour commented Dec 17, 2019

sashok1337 commented Apr 23, 2020

vietlongn commented Jun 18, 2020

prajilshresthaiw commented Jul 27, 2020

Flippsor commented May 31, 2021

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

Comments

imerljak commented Sep 26, 2019 • edited

tsonevn commented Oct 1, 2019

imerljak commented Oct 7, 2019

imerljak commented Oct 7, 2019 • edited

vahidvdn commented Oct 10, 2019

imerljak commented Oct 10, 2019 • edited

tsonevn commented Oct 23, 2019

SmailHammour commented Dec 17, 2019

sashok1337 commented Apr 23, 2020

vietlongn commented Jun 18, 2020

prajilshresthaiw commented Jul 27, 2020

Flippsor commented May 31, 2021

imerljak commented Sep 26, 2019 •

edited

imerljak commented Oct 7, 2019 •

edited

imerljak commented Oct 10, 2019 •

edited