Difference between Angular's canLoad and canActivate?

Question

What is the difference between canLoad and canActivate?

export interface Route {
  path?: string;
  pathMatch?: string;
  matcher?:         


        

Answer 1

• 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