Chapter 4. Router advanced

This chapter covers some advanced router features. You’ll learn how to use router guards that allow you to restrict access to certain routes, warn the user about unsaved changes, and ensure that important data is retrieved before allowing the user to navigate to a route.

We’ll then show you how to create components that have more than one router outlet. Finally, you’ll see how to load modules lazily—meaning only when the user decides to navigate to certain routes.

This chapter doesn’t include the hands-on section for ngAuction. If you’re eager to switch from dealing with routing to learning other Angular features, you can skip this chapter and come back to it at a later time.

4.1. Guarding routes

Angular offers several guard interfaces that give you a way to mediate navigation to and from a route. Let’s say you have a route that only authenticated users can visit. In other words, you want to guard (protect) the route. Figure 4.1 shows a workflow illustrating how a login guard can protect a route that can be visited only by authenticated users. If the user isn’t logged in, the app will render a login view.

Here are some other scenarios where guards can help:

4.2. Developing an SPA with multiple router outlets

Summary