I was able to do what I need with resolvers, but it seems extremally hacky to do it this way because a resolver is not a route guard. T_T

Ah and if it helps narrow this down. This is how my route looked before the resolver fix:

RouterModule.forChild([
      {
        path: '',
        pathMatch: 'full',
        component: StoryDetailsComponent,
        canDeactivate: [UnsavedDataGuard, RequiredDataGuard],
        runGuardsAndResolvers: ((from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => {
          console.log(from,to);

          return false;
        }),
        data: { animation: 'story-details' }
      }
    ])

UnsavedDataGuard returns a Promise<boolean> and RequiredDataGuard returns a boolean. All my routes are lazy loaded and they work fine as far as I can tell.

Found a better solution which let me use only the route guard. I read through the docs some more and found the nextState parameter.

This does exactly what I need and does not rely on resolvers and does not rely on runGuardsAndResolvers, which does not appear to be working. Hopefully this helps someone else who gets stuck on this. :)

Ignore the alert, I'll make something better later hehe. But the idea is, I don't want users navigating to any of the routes which are siblings to this one if they haven't filled out these required fields and submitted them

This is an issue with the documentation. RunGuardsAndResolvers only applies when the navigation doesn’t change the activated route. Probably would have been better named “rerunGuardsAndResolvers”.

That is, it applies only when they would otherwise not be run because the route isn’t being activated or deactivated.