candeactivate with child routes not working

Question

I have routing as below:

{
  path: "home",
  children: [{
    path: "dashboard",
    children: [{
      path: "user",
      canDeactivate: [CanWeDeactivateThis]
    }]
  }]
}

There are components defined in routes, above is just a simple snapshot. I get component as null when I add can deactivate in user path but if I add it on dashboard path it works well. Adding in the dashboard does not work for me, as I have multiple children on the dashboard and I need show confirmation if the user navigates to them as well.

Not sure how to resolve this one.

The angular version is 6.1.0

I followed this thread but no help.

Cany anyone help please?

BTW, the above routing definitions is part of a lazy loaded angular module.

Answer 1

{
  path: "home",
  children: [{
    path: "dashboard",
    children: [{
      path: "user",
      component : "user",
      canDeactivate: [CanWeDeactivateThis]
    }]
  }]
}

You Should add component name for the children. You can also try below code if you want to apply canDeactivate method to all the children.

{
      path: "home",
      children: [{
        path: "dashboard",
        canDeactivate: [CanWeDeactivateThis],
        children: [{
          path: "user",
          component : "user"          
        }]
      }]
    }

If the feature module is loaded asynchronously, the CanLoad guard is checked before the module is loaded. If any guard returns false, pending guards that have not completed will be canceled, and the entire navigation is canceled. So check if you have any CanLoad guard also.