🎁

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 : 52 : 31
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
1×
Become a member
to unlock all features
Autoplay

    Catch an invalid route navigation with the Angular router

    Juri StrumpflohnerJuri Strumpflohner
    angularAngular
    ~7.0.0

    Usually on web sites, if you pay attention to a good user experience, you define a custom 404 page, telling the user he arrived at some dead end. Similarly we should do for our Angular application routing. In this lesson we learn how to define such “404 route” using the Angular router.

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    In the sample application, we have defined different kind of routes which we can navigate to by changing the URL up here. Now, what happens if the user types in some URL which doesn't exist? Our application redirects simply to the home, and nothing happens.

    We want obviously to have a better user experience. Let's generate a new component. Let's call it notFound. Then we go to our app module, and at the very end here, we define a route that is going to catch all those routes which aren't matched.

    We do that by defining here to asterisk. As a component, as you can imagine, we specify our notFound component. Let's open the notFound component, specify here, "Sorry, nothing to see here." Great. Let's save this.

    Now, whenever we go to our routing component here, our normal routes just work. Where we a specify a route which doesn't exist, our component here, notFound, gets loaded and displays something nice to the user.