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
• Preloading data to improve the UX
• Lazy loading routes to speed up the response time
• Providing artifacts to easily enable the debugging of the router behavior in an Angular 10 app

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 the word guard and its name as parameters:

ng generate guard auth

When we execute the previous command, the Angular CLI asks which interfaces we would like our guard to implement...