Beginner's Guide to Angular: Routing

In any single-page application, routing is the hub that makes sure the right components get loaded for the current view or application state. Routes are often requested when the application is loaded or when a user operation is triggered. Also, route requests can be raised based on inputs from the server.

In Angular, the router has a number of important building blocks. In this post, I'll show you the most important parts of the Angular router, and we'll build a practical example along the way.

1. Setting Up the Angular Router

First things first, you must have the Angular router installed in your project.

The Angular router is an extremely powerful JavaScript-based router. It is created and managed by the core Angular team.

The router can be installed easily from the @angular/router package. Installing this package will give your project complete access to all the routing features you would need: from router guards to path matching methods to the creation of several router outlets.

Step 1: Install the `@angular/router` Package

There are two different ways of installing the @angular/router package, depending on the package manager you use in your project.

With NPM:

1	npm i --save @angular/router

Or with Yarn:

1	yarn add @angular/router

Step 2: Set Up the Base Location in index.html

Before you use the features of the @angular/router package, you need to set the root route of the application in your index.html file. If you look at the root folder of your application, you will find the index.html file. Here, add the base location using the base tag. We are going to use the app folder as the root of the application using the "/" path.

Making this change tells Angular the starting location for all the different routes in your application.

<!doctype html>
<html>
  <head>
    <base href="/">
    <title>Angular Routing</title>
  </head>
  .
  .
  .
 </html>

Step 3: Adding Dependencies to app.module.ts

If you are going to make use of the @angular/router package, you have to import the router into NgModule. The main App Module of your application must have the RouterModule. In our case, the app.module.ts file has the NgModule declaration. This file has to be modified with the following components:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, RouterModule],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
export class AppModule {}

Step 4: Configuring `RouterModule`

RouterModule needs information about the routes in your single-page application. Until this information is provided, RouterModule will not be useful. RouterModule has two static methods which can be used to provide the required configuration of the routes in the application to the router. This is when the entire setup gets completed.

When routes are being defined for the root configuration of the application, a static method called RouterModule.forRoot can be used. This will give the main NgModule access to the multiple router directives in your application. Here is a small snippet to show how RouterModule.forRoot can be used.

import { Routes, RouterModule } from '@angular/router';
.
.
.
export const ROUTES: Routes = [];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
  .
  .
  .
})
export class AppModule {}

Here, we pass an array of routes to the configuration. It is best practice in Angular routing to use a variable or a constant inside forRoot. In many cases, it would be most readable and easiest to maintain if the routes are stored in a separate file and imported into the AppModule of your application. We'll look at how to specify the ROUTES array below.

Next, we have RouterModule.forChild, which is extremely similar to the functionality offered by RouterModule.forRoot. The main difference is that RouterModule.forChild can be treated like a feature module. It saves developers the effort of defining all the required routes in a single page as does forRoot. Modules within the application can define and configure their own routes. Based on need, these routes can be imported into the main module.

Here is a small code snippet where we use RouterModule.forChild.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(ROUTES)],
  .
  .
  .
})
export class ChildModule {}

Step 5: Loading Components

Now we've finished the basic configuration of our routes. The next step is to help Angular load components. For this, we make use of a directive called router-outlet.

The moment our router identifies a component to load for a route, the component gets created dynamically. And the dynamically created component is injected along the router-outlet element. The newly created component is treated as a sibling for the router-outlet element. The router-outlet directive can be inserted anywhere in your main application component.

Meanwhile, if you are building a simple AppComponent, you can inject the directive as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'appComponent',
  template: `
    <div>
      <h1>Angular Routing</h1>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent {}

And that's where the setup comes to an end. Now, we can look into the specific needs of the project and start building routes.

Step 6: Creating Routes for a Single-Page Application

We will be building the routes for our application in the following file: app.routing.ts. When you build a single-page application, it is crucial to have a static route. In our case, the static route would be the home page loaded by the application.

Here is our routes array:

export const AppRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'calc', component: CalcComponent },
    { path: '**', component: NotFoundComponent }
];

The empty path denotes the static route.
The calc path will be used to load the calculator component we built in the first part of this series.
The wildcard path ** denotes what should be loaded in case there is no other matching route.

Step 7: Let's Navigate

With the above created route and configuration changes, we are ready to navigate. Let's start by creating a main component for our application called HomeComponent. In our home.component.html file, you would see two new directives: routerLink and routerLinkActive.

routerLink is an Angular directive where you can route from one route to another without changing the value in the URL bar. If you want to create a dynamic route, you need to wrap routerLink and pass an array. The syntax for a dynamic router link is [routerLink]=['/path', variable].

Here's our home.component.html file with a static router link.

<h2>
    Welcome to Home Page
</h2>
 
<nav>
      <a routerLink="/calc" routerLinkActive="active">Go to Calc</a>
</nav>

The routerLinkActive directive is used when you want to tell the user which is active. This directive needs to be used along with routerLink.

And here's what the corresponding home.component.ts file looks like.

import { Component } from '@angular/core';
 
@Component({
  selector: 'home',
  templateUrl: 'home.component.html'
})
export class HomeComponent {}

By default, when you load the application, the HomeComponent gets loaded. Why? Because the '' path corresponds to the HomeComponent.

When you navigate to /calc, the following view will appear. Why? Because /calc loads the CalcComponent in our app.routing.ts component.

Now, you have understood the basics of routing, You have created a landing page for your application, and a route! Next, we are going to cover a few advanced concepts in Angular routing.

Advanced Routing Concepts

Dynamic Route Parameters

In single-page applications, there is a chance that you would reach a specific route with several operations in mind. For example, in our calculator application, the CalcComponent can be launched only for "addition", "subtraction", or "division". We can achieve this with the help of a colon (:) in the URL segment. The colon tells the router that the value entered is not a part of the URL, but is instead a route parameter.

export const AppRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'calc/:operation', component: CalcComponent },
    { path: '**', component: NotFoundComponent }
];

What we have established is a dynamic route. Now, when we create a link or type an address in the location bar, we can easily swap :operation for any of the operations like addition, subtraction, or division.

Now comes our next challenge. How would you extract the dynamic route information from the route URL? Most of the time, we make use of ngOnInit. If you have a moment, do spend some time on our post about Angular Components where you'll read about ngOnInit and its role in the lifecycle of a component.

In order to access dynamic route parameters, we make use of ActivatedRoute.

ActivatedRoute contains an Observable called params. By subscribing to params, we can easily extract the route parameters. The best place to subscribe would be ngOnInit. When we route from one parameter to another, the actual route component will not be destroyed. This is a technique Angular uses to boost performance. When you subscribe at ngOnInit, you will receive a notification every time the router parameter changes.

Here is a simple piece of code to help you understand the use of ActivatedRoute.

//the Route is defined as
path = '/calc/:operation'

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'calc.component',
  templateUrl: './calc.component.html' 
})
export class CalcComponent implements OnInit {
  operation: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.params.subscribe((params) =&gt; this.operation = params.operation);
  }
}

Creating Child Routes

So far, we have seen routes that stop with a single level. Now, let's define routes that go into multiple levels. For instance, a single-level route would be /calc, and a multi-level route would be /calc/addition.

We can assign /calc its very own component, and /calc/addition will have another component. To achieve this behavior, we make use of children with the path.

Additionally, to make the child routes work, it is important to include <router-outlet> in the parent component, where the routes would be rendered from.

Sometimes, we may not use the parent route at all for a specific component. In this case, we can remove the component from our route declaration. This is also known as a componentless route.

Here's a simple example to help you understand these concepts.

//DEFINING THE ROUTE
export const ROUTES: Routes = [
  {
    path: 'calc',
    component: CalcComponent,
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubstractionComponent },
    ],
  },
];

//COMPONENT-LESS ROUTE
export const ROUTES: Routes = [
  {
    path: 'calc',
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubstractionComponent },
    ],
  },
];
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
})


//BUILDING THE PARENT COMPONENT
import { Component } from '@angular/core';

@Component({
  selector: 'calc.component',
  template: `
  <div>
      <calc-addition></calc-addition>
      <calc-subtraction></calc-subtraction>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class CalcComponent {}

Fetching Routes From Different Modules

As your application becomes bigger, handling routes can be a challenge. There will be times when you need to fetch routes from different modules. In such cases, you can make use of loadChildren. This is when RouterModule.forChild() becomes useful.

Let's begin with an example:

//CHILD ROUTE
export const ROUTES: Routes = [
  {
    path: '',
    component: CalcComponent,
    children: [
      { path: 'addition', component: CalcAdditionComponent },
      { path: 'subtraction', component: CalcSubtractionComponent },
    ],
  },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(ROUTES)],
})
export class CalcModule {}

//PARENT ROUTE
export const ROUTES: Routes = [
  {
    path: 'calc',
    loadChildren: './calc/calc.module#CalcModule',
  },
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
})
export class AppModule {}

A few interesting aspects to be understood from the above code are:

We have an empty path. This is because we don't want the route path to be /calc/calc.
The CalcModule has to be imported in the Root AppModule.
Angular comes with intuitive concepts like Lazy Loading. By using the above workflow, you can make sure that the child components are loaded only when the user goes to /calc/**.

Wrapping Up

In this tutorial, you learnt the basics of how to handle routing in Angular. You learnt how to define a route and navigate in different ways through an Angular application. The source code for this tutorial is available on GitHub. The concepts discussed in this post cover the basics. As you master the basics, you will be able to dig deeper into the more advanced Angular routing concepts like activating guards, router navigation, and more.