Using Angular routes in a single-page application

This tutorial describes how to build a single-page application, SPA that uses multiple Angular routes.

In a Single Page Application (SPA), all of your application's functions exist in a single HTML page. As users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page. This pattern can significantly improve your application's user experience.

To define how users navigate through your application, you use routes. Add routes to define how users navigate from one part of your application to another. You can also configure routes to guard against unexpected or unauthorized behavior.

Objectives

Organize a sample application's features into modules.
Define how to navigate to a component.
Pass information to a component using a parameter.
Structure routes by nesting several routes.
Check whether users can access a route.
Control whether the application can discard unsaved changes.
Improve performance by pre-fetching route data and lazy loading feature modules.
Require specific criteria to load components.

Create a sample application

Using the Angular CLI, create a new application, angular-router-sample. This application will have two components: crisis-list and heroes-list.

Create a new Angular project, angular-router-sample.
```
      ng new angular-router-sample
    
```
When prompted with Would you like to add Angular routing?, select N.

When prompted with Which stylesheet format would you like to use?, select CSS.

After a few moments, a new project, angular-router-sample, is ready.
From your terminal, navigate to the angular-router-sample directory.

Create a component, crisis-list.

      ng generate component crisis-list

In your code editor, locate the file, crisis-list.component.html and replace the placeholder content with the following HTML.

src/app/crisis-list/crisis-list.component.html

      <h3>CRISIS CENTER</h3><p>Get your crisis here</p>

Create a second component, heroes-list.

      ng generate component heroes-list

In your code editor, locate the file, heroes-list.component.html and replace the placeholder content with the following HTML.
src/app/heroes-list/heroes-list.component.html
```
      <h3>HEROES</h3><p>Get your heroes here</p>
    
```

In your code editor, open the file, app.component.html and replace its contents with the following HTML.

src/app/app.component.html

      <h1>Angular Router Sample</h1><nav>  <a class="button"     routerLink="/crisis-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Crisis Center  </a> |  <a class="button"     routerLink="/heroes-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Heroes  </a></nav><router-outlet></router-outlet><div style="display: none;"><!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. --><app-crisis-list></app-crisis-list><app-heroes-list></app-heroes-list><!-- This HTML snippet is for when the user first adds the routerlink navigation. --><nav>  <a class="button" routerLink="/crisis-list">Crisis Center</a> |  <a class="button" routerLink="/heroes-list">Heroes</a></nav></div>

Verify that your new application runs as expected by running the ng serve command.
```
      ng serve
    
```
Open a browser to http://localhost:4200.

You should see a single web page, consisting of a title and the HTML of your two components.

Define your routes

In this section, you'll define two routes:

The route /crisis-center opens the crisis-center component.
The route /heroes-list opens the heroes-list component.

A route definition is a JavaScript object. Each route typically has two properties. The first property, path, is a string that specifies the URL path for the route. The second property, component, is a string that specifies what component your application should display for that path.

From your code editor, create and open the app.routes.ts file.

Create and export a routes list for your application:

import {Routes} from '@angular/router';

export const routes = [];

Add two routes for your first two components:

{path: 'crisis-list', component: CrisisListComponent},
{path: 'heroes-list', component: HeroesListComponent},

This routes list is an array of JavaScript objects, with each object defining the properties of a route.

Import `provideRouter` from `@angular/router`

Routing lets you display specific views of your application depending on the URL path. To add this functionality to your sample application, you need to update the app.config.ts file to use the router providers function, provideRouter. You import this provider function from @angular/router.

From your code editor, open the app.config.ts file.

Add the following import statements:

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

Update the providers in the appConfig:
```
providers: [provideRouter(routes)]
```

For NgModule based applications, put the provideRouter in the providers list of the AppModule, or whichever module is passed to bootstrapModule in the application.

Update your component with `router-outlet`

At this point, you have defined two routes for your application. However, your application still has both the crisis-list and heroes-list components hard-coded in your app.component.html template. For your routes to work, you need to update your template to dynamically load a component based on the URL path.

To implement this functionality, you add the router-outlet directive to your template file.

From your code editor, open the app.component.html file.

Delete the following lines.

src/app/app.component.html

      <h1>Angular Router Sample</h1><nav>  <a class="button"     routerLink="/crisis-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Crisis Center  </a> |  <a class="button"     routerLink="/heroes-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Heroes  </a></nav><router-outlet></router-outlet><div style="display: none;"><!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. --><app-crisis-list></app-crisis-list><app-heroes-list></app-heroes-list><!-- This HTML snippet is for when the user first adds the routerlink navigation. --><nav>  <a class="button" routerLink="/crisis-list">Crisis Center</a> |  <a class="button" routerLink="/heroes-list">Heroes</a></nav></div>

Add the router-outlet directive.

src/app/app.component.html

      <h1>Angular Router Sample</h1><nav>  <a class="button"     routerLink="/crisis-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Crisis Center  </a> |  <a class="button"     routerLink="/heroes-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Heroes  </a></nav><router-outlet></router-outlet><div style="display: none;"><!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. --><app-crisis-list></app-crisis-list><app-heroes-list></app-heroes-list><!-- This HTML snippet is for when the user first adds the routerlink navigation. --><nav>  <a class="button" routerLink="/crisis-list">Crisis Center</a> |  <a class="button" routerLink="/heroes-list">Heroes</a></nav></div>

Add RouterOutlet to the imports of the AppComponent in app.component.ts
```
imports: [RouterOutlet],
```

View your updated application in your browser. You should see only the application title. To view the crisis-list component, add crisis-list to the end of the path in your browser's address bar. For example:

      http://localhost:4200/crisis-list

Notice that the crisis-list component displays. Angular is using the route you defined to dynamically load the component. You can load the heroes-list component the same way:

      http://localhost:4200/heroes-list

Currently, your application supports two routes. However, the only way to use those routes is for the user to manually type the path in the browser's address bar. In this section, you'll add two links that users can click to navigate between the heroes-list and crisis-list components. You'll also add some CSS styles. While these styles are not required, they make it easier to identify the link for the currently-displayed component. You'll add that functionality in the next section.

Open the app.component.html file and add the following HTML below the title.

src/app/app.component.html

      <h1>Angular Router Sample</h1><nav>  <a class="button"     routerLink="/crisis-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Crisis Center  </a> |  <a class="button"     routerLink="/heroes-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Heroes  </a></nav><router-outlet></router-outlet><div style="display: none;"><!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. --><app-crisis-list></app-crisis-list><app-heroes-list></app-heroes-list><!-- This HTML snippet is for when the user first adds the routerlink navigation. --><nav>  <a class="button" routerLink="/crisis-list">Crisis Center</a> |  <a class="button" routerLink="/heroes-list">Heroes</a></nav></div>

This HTML uses an Angular directive, routerLink. This directive connects the routes you defined to your template files.

Add the RouterLink directive to the imports list of AppComponent in app.component.ts.

Open the app.component.css file and add the following styles.

src/app/app.component.css

      .button {    box-shadow: inset 0 1px 0 0 #ffffff;    background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);    border-radius: 6px;    border: 1px solid #dcdcdc;    display: inline-block;    cursor: pointer;    color: #666666;    font-family: Arial, sans-serif;    font-size: 15px;    font-weight: bold;    padding: 6px 24px;    text-decoration: none;    text-shadow: 0 1px 0 #ffffff;    outline: 0;}.activebutton {    box-shadow: inset 0 1px 0 0 #dcecfb;    background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);    border: 1px solid #84bbf3;    color: #ffffff;    text-shadow: 0 1px 0 #528ecc;}

If you view your application in the browser, you should see these two links. When you click on a link, the corresponding component appears.

Identify the active route

While users can navigate your application using the links you added in the previous section, they don't have a straightforward way to identify what the active route is. Add this functionality using Angular's routerLinkActive directive.

From your code editor, open the app.component.html file.

Update the anchor tags to include the routerLinkActive directive.

src/app/app.component.html

      <h1>Angular Router Sample</h1><nav>  <a class="button"     routerLink="/crisis-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Crisis Center  </a> |  <a class="button"     routerLink="/heroes-list"     routerLinkActive="activebutton"     ariaCurrentWhenActive="page">    Heroes  </a></nav><router-outlet></router-outlet><div style="display: none;"><!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. --><app-crisis-list></app-crisis-list><app-heroes-list></app-heroes-list><!-- This HTML snippet is for when the user first adds the routerlink navigation. --><nav>  <a class="button" routerLink="/crisis-list">Crisis Center</a> |  <a class="button" routerLink="/heroes-list">Heroes</a></nav></div>

Add the RouterLinkActive directive to the imports list of AppComponent in app.component.ts.

View your application again. As you click one of the buttons, the style for that button updates automatically, identifying the active component to the user. By adding the routerLinkActive directive, you inform your application to apply a specific CSS class to the active route. In this tutorial, that CSS class is activebutton, but you could use any class that you want.

Note that we are also specifying a value for the routerLinkActive's ariaCurrentWhenActive. This makes sure that visually impaired users (which may not perceive the different styling being applied) can also identify the active button. For more information see the Accessibility Best Practices Active links identification section.

Adding a redirect

In this step of the tutorial, you add a route that redirects the user to display the /heroes-list component.

From your code editor, open the app.routes.ts file.

Update the routes section as follows.

{path: '', redirectTo: '/heroes-list', pathMatch: 'full'},

Notice that this new route uses an empty string as its path. In addition, it replaces the component property with two new ones:

Properties	Details
`redirectTo`	This property instructs Angular to redirect from an empty path to the `heroes-list` path.
`pathMatch`	This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the Route API documentation.

Now when you open your application, it displays the heroes-list component by default.

Adding a 404 page

It is possible for a user to try to access a route that you have not defined. To account for this behavior, the best practice is to display a 404 page. In this section, you'll create a 404 page and update your route configuration to show that page for any unspecified routes.

From the terminal, create a new component, PageNotFound.

      ng generate component page-not-found

From your code editor, open the page-not-found.component.html file and replace its contents with the following HTML.

src/app/page-not-found/page-not-found.component.html

      <h2>Page Not Found</h2><p>We couldn't find that page! Not even with x-ray vision.</p>

Open the app.routes.ts file and add the following route to the routes list:
```
{path: '**', component: PageNotFoundComponent}
```
The new route uses a path, **. This path is how Angular identifies a wildcard route. Any route that does not match an existing route in your configuration will use this route.

IMPORTANT: Notice that the wildcard route is placed at the end of the array. The order of your routes is important, as Angular applies routes in order and uses the first match it finds.

Try navigating to a non-existing route on your application, such as http://localhost:4200/powers. This route doesn't match anything defined in your app.routes.ts file. However, because you defined a wildcard route, the application automatically displays your PageNotFound component.

Next steps

At this point, you have a basic application that uses Angular's routing feature to change what components the user can see based on the URL address. You have extended these features to include a redirect, as well as a wildcard route to display a custom 404 page.

For more information about routing, see the following topics:

src/app/crisis-list/crisis-list.component.html

src/app/heroes-list/heroes-list.component.html

src/app/app.component.html

src/app/app.component.html

src/app/app.component.html

src/app/app.component.html

src/app/app.component.css

src/app/app.component.html

src/app/page-not-found/page-not-found.component.html