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
constroutes: 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.
constroutes: 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}}];