Enhancing navigation with advanced features

So far, we have covered basic routing, with route parameters as well as query parameters. The Angular router is quite capable, though, and able to do much more, such as the following:

• Controlling access to a route
• Preventing navigation away from a route
• Prefetching data to improve the UX
• Lazy loading routes to speed up the response time

In the following sections, we will learn about all these techniques in more detail.

Controlling route access

When we want to prevent unauthorized access to a particular route, we use a specific Angular service called a guard. To create a guard, we use the generate command of the Angular CLI, passing its name as a parameter. To create a guard that will allow access to a route depending on whether the user is authenticated or not, we will run the following command in the src\app\auth folder:

ng generate guard auth

When we execute the previous command, the Angular...