В чем разница между canLoad и canActivate?
export interface Route {
path?: string;
pathMatch?: string;
matcher?: UrlMatcher;
component?: Type<any>;
redirectTo?: string;
outlet?: string;
canActivate?: any[];
canActivateChild?: any[];
canDeactivate?: any[];
canLoad?: any[];
data?: Data;
resolve?: ResolveData;
children?: Routes;
loadChildren?: LoadChildren;
}
Когда мне нужно, какой из них?
canActivate используется для предотвращения доступа неавторизованных пользователей к определенным маршрутам. Дополнительную информацию см. В документах.
canLoad используется для того, чтобы приложение не загрузило целые модули лениво, если пользователь не уполномочен делать это.
Дополнительную информацию см. В документах и примерах ниже.
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
С помощью этого кода код для AdminModule будет загружен только в приложение, если AuthGuard вернет true.
Если пользователю не разрешен доступ к этому маршруту, и мы использовали canActivate защитник AdminModule, будет загружен AdminModule, даже если пользователь не сможет получить доступ к этому маршруту.
Что касается вопроса из комментариев в другом сообщении "Если я использую canActivate в описанном выше сценарии, какая разница?"
Фактически для пользователя не будет никакой разницы, он не получит никакого доступа к странице в обоих случаях. Хотя есть одна скрытая разница. Если вы нажмете F12 и перейдите в "Источники" (в Chrome), где находятся файлы для загрузки. Затем вы можете увидеть, что в случае, если файл canActive с кодом был загружен (chunk.js). Даже если у вас нет доступа к странице. 
Но в случае с canLoad не будет файла chunk.js с исходным кодом.
Таким образом, вы можете видеть, что это действительно сильно влияет на безопасность.
И, конечно же, не забывайте, что canLoad можно использовать только для модулей LazyLoaded.
canActivate используется для предотвращения несанкционированного пользователя
canLoad используется для предотвращения использования всего модуля приложения
Пример canActivate:
{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }
Пример canLoad:
{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }