Protecting a Lazy-Loaded Module

Learn how to control unauthorized access to a lazy-loaded module and lazy load components.

Lazy-loaded modules are standard Angular modules, so we can control their access using guards. We can control unauthorized access to a lazy-loaded module similar to how we can do so in eagerly loaded ones. However, our guards need to implement a different interface for this case, the CanLoad interface.

Using a lazy-loading module in auth guard

We will extend our authentication guard for use with lazy-loaded modules.

  1. Open the auth.guard.ts file and import CanLoadFn from the @angular/router npm package:

Get hands-on with 1200+ tech skills courses.