Getting Started ✍️With Angular Routing🔀Using Angular CLI

Introduction

In this article, we are going to learn the basic routing concepts in Angular 6 using Angular CLI (Command Line Interface). So, before reading this article, you must read the following articles for more knowledge.

Routing in Application

In every application, we do a minimal number of route concepts. For example, while clicking the menu page, it will redirect to a child page or different page, etc. How can we do this in Angular? Yes, there are a few basic things we need to configure before the routing is implemented in Angular.

Creating a Routing Module

By using the command line parameter "--routing", we’re able to create a routing module in the Angular application. So, by using any of the following commands, we can create a routing module in Angular with the default routing set up. We have given “app-routing” as our routing module name.

ng generate module app-routing --flat --module=app
ng g m app-routing --flat --module=app

Note :

--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule

The following code is generated after the above command's execution.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }

Import Router in the Application

Angular Router is an optional service and it is not a part of "@angular/core" and Router Modules are the part of "@angular/router" library package. So we need to import "RouterModule" and "Routes" from "@angular/router" library package.

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

Add Routes

A very simple explanation in Angular docs is “Routes” which tells the router which view to display when a user clicks a link or pastes a URL into the browser address bar. So the scenario is whether a click or paste a URL into the browser!!

const routes: Routes = [{}];

We have created empty routes in our routing module. Now we need to add redirect page, default page , 404 page , etc. For this just type "a-path" inside the "{}" and It will display the possible routing options in the routing module.

Now we have added path and component name in the Routes.

const routes: Routes = [{ path: 'customer', component: CustomerComponent }];

We already know "app component" is our default launching page in Angular application. So we need to setup a routing configuration in the app component.

RouterModule.forRoot()

We first initialize and import the router setup and it starts listening to the browser location changes. Whatever routes we have mentioned earlier will be injected into the forRoot().

@NgModule({
exports: [RouterModule] ,
imports: [
CommonModule, [RouterModule.forRoot(routes)]
],
declarations: []
})

RouterModule.forChild()

forChild() is used for the submodules and lazy loaded submodules in the following way.

@NgModule({
exports: [RouterModule] ,
imports: [
CommonModule, [RouterModule.forChild(routes)]
],
declarations: []
})

Router Outlet

RouterOutlet acts as a placeholder and it looks like a component. So when you place this outlet in an app component then it will be dynamically filled based on the current router state.

<router-outlet></router-outlet>

Navigation

The navigation we have added in the same app component page and while clicking on the "/customer" string content in "routerLink" then It will redirect into the respective page. We can add more functionality in the anchor tag like active,binding array of links,etc.

The Router Output

While clicking on the "customer" link it will redirect into the customer component.

Page Not Found – 404 Error!!

If a user is trying to access different pages in the application and that is not part of the routing configuration then we need to display an Error message page called as Page Not Found. Any of the following commands will create a "Page Not Found" page with using inline template.

ng generate component PageNotFound --inline-template
ng g c PageNotFound -t

We have modified the PageNotFound typescript file.

If you want to add bootstrap style in the application then import the following reference link in the style.css.

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

We have updated the router URL as "PageNotFoundComponent" with path mentioned as "**" in the last route is a wildcard. If the requested URL doesn’t match any paths for routes defined in the following configuration. This will help us to displaying a “404 – Not Found” page or redirecting to another route.

const routes: Routes = [{ path: '', component: EmployeeComponent },
{ path: 'customer', component: CustomerComponent },
{ path: '**', component: PageNotFoundComponent }];

Output

Download

Source Code

Reference

Summary

From this article, we have learned the basic routing concepts of Angular CLI. I hope this article is useful for all the Angular CLI beginners.