Skip to content

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

Description

@imerljak

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

Activity

  1. tsonevn commented on Oct 1, 2019

    @tsonevn
    Contributor

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

  2. imerljak commented on Oct 7, 2019

    @imerljak
    Author

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

  3. imerljak commented on Oct 7, 2019

    @imerljak
    Author

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

  4. vahidvdn commented on Oct 10, 2019

    @vahidvdn

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

  5. imerljak commented on Oct 10, 2019

    @imerljak
    Author

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

  6. tsonevn commented on Oct 23, 2019

    @tsonevn
    Contributor

    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.

  7. SmailHammour commented on Dec 17, 2019

    @SmailHammour

    What's the status on this?

  8. sashok1337 commented on Apr 23, 2020

    @sashok1337

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

  9. vietlongn commented on Jun 18, 2020

    @vietlongn

    any update please

  10. prajilshresthaiw commented on Jul 27, 2020

    @prajilshresthaiw

    ANy info? @tsonevn

  11. Flippsor commented on May 31, 2021

    @Flippsor

    Having trouble with this problem, too. Any news?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions