12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 43 : 33
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
Become a member
to unlock all features

    Prevent a route from being lazy loaded based on user permissions with the Angular router

    Juri StrumpflohnerJuri Strumpflohner

    What if we have a lazy loaded application module behind some route and we want to prevent an unauthorized user from accessing it? We can directly implement a CanLoad route guard to even prevent the lazy loaded module from being downloaded. That’s what we are going to do in this lesson.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Here, I'm having routing configuration where we have a people module, and that people module uses canActivate property here and uses the implementation by this authGuard, such that the users which are not logged in won't be able to enter that route.

    If the person clicks that people route, it will not be able to enter and it will be redirected automatically to home, in case the person does something like this by specifying the people route in the URL.

    Now if you pay a close attention, let's also refresh this again. This people route is actually a lazy loaded route. What happens is that, when I'm not logged in here, as it is currently the case, and I click that people route, you can see that the JavaScript file gets loaded over the wire, but we're not able to actually load the people module, because we are not logged in.

    The point is that, in this case, it's totally useless to load that people module. Angular for that purposes has also something that is called canLoad, which takes the same syntax, so we can directly reuse that authGuard which I've specified.

    The only thing we have to do is to also implement here to canLoad interface, which we again import from angular router. Let's also implement actual interface function, which returns here again a Boolean. Let's use that Boolean here.

    We get again a route configuration and URL segment in this case. For our specific implementation here, we won't need any of those. We will actually use the same implementation. For that purpose, let's extract that into known function, and again here we copy this over.

    In this way, we can now reference the function from both or canActivate, and also on our canLoad function. Now, let's save both of these files. Now if I click that people module, nothing actually happens.

    Also, the file doesn't get lazy loaded over the wire. Now, let's log into counter check. If I click now, it gets lazy loaded and our module gets properly visualized.