In the second part of the beginner's guide to Angular tutorial series, you learnt what services are in Angular 4 and how to write Angular services and use them in an Angular component. 

In this part of the tutorial series, you'll learn how to handle routing in Angular 4.

Getting Started

You'll start by cloning the source code from the first part of the tutorial series.

git clone https://github.com/royagasthyan/AngularComponent.git

Once you have the source code, navigate to the project directory and install the required dependencies.

cd AngularComponent
npm install

After the dependencies have been installed, start the application by typing the following command:

ng serve

You should have the application running on http://localhost:4200/.

Routing & Navigation

When a user enters a web application or website, routing is their means of navigating throughout the application. To change from one view to another, the user clicks on the available links on a page.

Angular provides a Router to make it easier to define routes for the web applications and to navigate from one view to another view in the application.

Creating Your First Route 

To implement routing in the web application, you'll be making use of the Angular Routing module. Create a file called app.routing.ts inside the src/app folder.

To get started with implementing routing, you need to import the RouterModule and Routes from @angular/router.

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

You'll also need the ModuleWithProviders module for implementing routing.

import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

Create and export a variable called AppRoutes in the app.routing.ts, which would be a collection of all routes inside the Angular application.

export const AppRoutes: Routes = [];

There are two ways to create the routing module: RouterModule.forRoot and RouterModule.forChild.

RouterModule.forRoot is for creating routes for the entire application, and RouterModule.forChild is for creating routes for lazy loaded modules.

In this tutorial, you'll be using RouterModule.forRoot to create routes for the root application.

Create the routing module using RouterModule.forRoot inside the app.routing.ts file.

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Add a route inside the AppRoutes list to show our CalcComponent. 

{ path: 'calc', component: CalcComponent }

Here is how the app.routing.ts file looks:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { CalcComponent } from './calc/calc.component'

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

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

As seen in the code, the route which has been added is /calc, which would render the CalcComponent.

Import the ROUTING constant inside the app.module.ts file.

import { ROUTING } from './app.routing'

Add the ROUTING to the imports section.

  imports: [
    BrowserModule,
    FormsModule,
    ROUTING
  ],

Here is how the app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ROUTING } from './app.routing'
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ROUTING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Save the above changes and restart the Angular application using ng serve.

Point your browser to http://localhost:4200/calc and you will have the CalcComponent displayed.

Implementing Navigation

With the above created route, you'll try to implement navigation. Let's start by creating a main component for our application called HomeComponent.

Create a folder called home inside the src/app folder. Inside the home folder, create a file called home.component.ts. Here is how it looks:

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

@Component({
  selector: 'home',
  templateUrl: 'home.component.html'
})
export class HomeComponent {

}

Create a template file called home.component.html. Add the following code to it:

<h2>
    Welcome to Home Page
</h2>

<nav>
      <a routerLink="/calc" routerLinkActive="active">Go to Calc</a>
</nav>

As seen in the above code, you have used routerLink for setting up the link navigation. routerLink is imported from the RouterModule.

Add the HomeComponent to the NgModule in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ROUTING } from './app.routing'
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ROUTING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Since you'll be using Angular routing, you need to display the place in our application where the router would display the views. As you have bootstrapped the AppComponent on run time, add the following code to the app.component.html file.

<router-outlet></router-outlet>

Router outlet tells the Angular router where to display the views.

Inside the app.routing.ts file, include the default route to display as the HomeComponent. Here is how the modified code looks:

{ path: '', component: HomeComponent }

Here is how the app.routing.ts file looks:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { CalcComponent } from './calc/calc.component';
import { HomeComponent } from './home/home.component';

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

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Save the above changes and restart the web application. Point your browser to http://localhost:4200/ and you will have the HomeComponent displayed by default.

Click on the link in the home component and you will be navigated to the calculator component.

Now let's add a route to handle undefined routing requests. Whenever the user navigates to a non-existent route, you'll show a message that the route is not found.

Add a new component called notfound. Create a folder called notfound inside the src/app folder. Create a file called notfound.component.ts. Add the following code:

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

@Component({
  selector: 'notfound',
  templateUrl: 'notfound.component.html',
  styleUrls: ['notfound.component.css']
})
export class NotFoundComponent {

}

Create a file called notfound.component.html and add the following code:

<h3>
    Component not found
</h3>

You'll be adding a wild card route to handle non-existent routes. Add the following code to the app.routing.ts file:

{ path: '**', component: NotFoundComponent }

Here is how the app.routing .ts file looks:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { CalcComponent } from './calc/calc.component';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './notfound/notfound.component';

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

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Save the above changes and restart the server. Point your browser to http://localhost:4200/abc and you will see the not found exception message.

Wrapping It Up

In this tutorial, you learnt the basics of how to handle routing in Angular. You learnt how to define a route and navigate through an Angular application. 

You learnt how to handle non-existent routes by defining a wild card route. You learnt how to use routerLink to link to another route.

How was your experience learning Angular Routing? Do let us know your thoughts and suggestions in the comment section below.

Source code from this tutorial is available on GitHub.