Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

Open
imerljak opened this issue Sep 26, 2019 · 11 comments · May be fixed by #2279
Open

Cannot reattach ActivatedRouteSnapshot created from a different route #1993

imerljak opened this issue Sep 26, 2019 · 11 comments · May be fixed by #2279
Labels
bug router

Comments

@imerljak
Copy link

imerljak commented Sep 26, 2019 •
edited
Loading

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
        }
    }
];
@tsonevn
Copy link
Contributor

tsonevn commented Oct 1, 2019

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

@imerljak
Copy link
Author

imerljak commented Oct 7, 2019

@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
Copy link
Author

imerljak commented Oct 7, 2019 •
edited
Loading

@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
Copy link

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

@imerljak
Copy link
Author

imerljak commented Oct 10, 2019 •
edited
Loading

@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
Copy link
Contributor

tsonevn commented Oct 23, 2019

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
Copy link

What's the status on this?

@sashok1337
Copy link

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

@vietlongn
Copy link

any update please

@prajilshresthaiw
Copy link

ANy info? @tsonevn

@edusperoni edusperoni linked a pull request Oct 19, 2020 that will close this issue
Draft
5 tasks
@Flippsor
Copy link

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
Assignees
No one assigned
Labels
bug router
Projects
None yet
Milestone
No milestone
8 participants
@sashok1337 @vietlongn @vahidvdn @SmailHammour @tsonevn @imerljak @Flippsor @prajilshresthaiw