Difference between Angular's canLoad and canActivate?

canActivate is used to prevent unauthorized users from accessing certain routes. See docs for more info.

canLoad is used to prevent the application from loading entire modules lazily if the user is not authorized to do so.

See docs and example below for more info.

{
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
},

With this code, the code for the AdminModule will only be loaded into the application if AuthGuard returns true.

If the user is not authorized to access this route, and we'd only used a canActivate guard, the AdminModule would be loaded, even though the user would not be able to access that route.

• CanActivate - Decides if a route can be activated, this guard may not be the best way for feature modules that are lazy loaded, as this guard will always load the module in memory, even if the guard returned false which means user not authorized to access the route.
• CanLoad - Decides if a module can be loaded lazily, Controls if a route can even be loaded. This becomes useful for feature modules that are lazy loaded. They won’t even load if the guard returns false.

This is a test i made on both guards with a feature module that is lazy loaded:

1. CanActivate Guard Test

you will notice at the bottom of Network page that it made 24 requests with size of 9.5 MB transferred finishing in 3.34 seconds and fully loaded in 3.47 seconds.

1. CanLoad Guard Test

here you will see the big difference when we used CanLoad Guard as browser made only 18 requests with size of 9.2 MB transferred finishing in 2.64 seconds and fully loaded 2.59 seconds.

CanLoad Guard never load the module data if user not authorized and that gives you more performance as the load time decreased almost 1 second and that is huge time in loading web pages, no doubt it depends on the module size.

Tip: if you want to make the test on your project make sure that Disable Cache checkbox in network tab is checked, it's marked in first image