In this tutorial, we’ll learn about the Angular Router by building an Angular 11 example and will teach you everything you need to start using routing to build Single Page Applications with navigation, guards, resolvers, and animations.

We’ll learn how to use multiple outlets, redirect users from the empty path, use wild-card paths to implement 404 error pages and lazy load modules using the loadChildren() method.

Note: This tutorial works with all Angular 6,7,8,9,10 and the new Angular 11 version.

Learn Navigation and Routing Using the Angular 11 Router With Example

You’ll learn about:

• How to import the necessary Angular built-in APIs to implement component routing and navigation,
• How to create the routing module and import it in the main application module,
• How to add routes to components,
• How to use single and multiple router outlets,
• How and when to use wild card routes,
• How to use routerLink for navigation,
• How to use nested and child routes,
• How to get route parameters,
• How to protect routes with guards,
• How to use resolvers.
• How to add animations,
• How to lazy-load modules using the loadChildren() method, etc.

These are the steps of first section:

• Step 1: Creating an Angular 11 Project
• Step 2: Understanding what the CLI Automatically Did For You
• Step 2.1: Adding <base href>
• Step 2.2: Creating a Routing Module
• Step 2.2: Importing the Router and Setting up Routing
• Step 2.3: Adding the Router-Outlet
• Step 2.4: Importing the Routing Module in the Main Application Module
• Step 3: Setting up a Service for Getting Data
• Step 4: Creating a Model
• Step 5: Creating Components
• Step 6: Implementing The Product List Component
• Step 7: Implementing the Product Details Component
• Step 8: Defining the Routes
• Step 10: Adding Navigation Links

Now let’s get started with Angular routing. In this section, we’ll learn the basic concepts behind routing in Angular 11. We’ll introduce the Angular Router and then we’ll proceed to create a simple single page application with Angular 11 that demonstrates the commonly used features of the router.

In more details, you’ll learn about:

• How to create Angular projects using Angular CLI v11,
• How to choose to have routing automatically setup and also how to manually add it in your project,
• How to create Angular services and emulate a backend server that you can use to fetch data using HttpClient,
• How to create Angular components,
• How to add component routing in your application using the router.

Introducing the Angular 11 Router

The Angular router is an essential element of the Angular platform. It allows developers to build Single Page Applications with multiple states and views using routes and components and allows client side navigation and routing between the various components. It’s built and maintained by the core team behind Angular development and it’s contained in the @angular/router package.

You can use the browser’s URL to navigate between Angular components in the same way you can use the usual server side navigation.

Angular Router has a plethora of features such as:

• The support for multiple Router outlets which helps you easily add complex routing scenario like nested routing,
• Various path matching strategies ( prefix and full) to tell the Router how to match a specific path to a component,
• Easy access to route parameters and query parameters,
• Resolvers,
• Lazy loading of modules,
• Route guards for adding client side protection and allow or disallow access to components or modules, etc.

Angular 11 provides a powerful router that allows you to map browser routes to components. So let’s see how we can add routing to applications built using Angular 11.

In this section, you’ll learn about various concepts related to Angular 11 routing such as:

• The Components, routes and paths,
• The router outlet,
• The route matching strategies,
• Route parameters,
• Query parameters,
• Route guards,
• Route resolvers,
• The routerLink directive (replaces the href attribute),
• Auxiliary routes,
• Primary and secondary router outlets.

Learn how to build step by step Angular SPA from this tutorial