nativescript-angular Cannot reattach ActivatedRouteSnapshot created from a different route

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

Sep 26 '19 21:09 imerljak

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

Oct 01 '19 05:10 tsonevn

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

Oct 07 '19 11:10 imerljak

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

Oct 07 '19 21:10 imerljak

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

Oct 10 '19 11:10 vahidvdn

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

Oct 10 '19 12:10 imerljak

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.

Oct 23 '19 07:10 tsonevn

What's the status on this?