Repository navigation
Cannot reattach ActivatedRouteSnapshot created from a different route #1993
Description
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
tsonevn commentedon 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 commentedon 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 commentedon Oct 7, 2019
@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.datato trigger the exception. Just registering the resolver on the route causes this error.vahidvdn commentedon Oct 10, 2019
hey @imerljak
Does it relate to my issue? #1830
imerljak commentedon Oct 10, 2019
@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 commentedon 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 commentedon Dec 17, 2019
What's the status on this?
sashok1337 commentedon Apr 23, 2020
Any progress here? It's very annoying bug :(
vietlongn commentedon Jun 18, 2020
any update please
prajilshresthaiw commentedon Jul 27, 2020
ANy info? @tsonevn
Flippsor commentedon May 31, 2021
Having trouble with this problem, too. Any news?