In Focus

Getting Started ✍️With Angular Routing🔀Using Angular CLI – Part 3

In this article we are going to learn the basic routing concepts in Angular 6 using Angular CLI (Command Line Interface ).

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.
  1. ng generate module app-routing --flat --module=app  
  2. ng g m app-routing --flat --module=app  
Note :
  1. --flat puts the file in src/app instead of its own folder.
  2. --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.
  1. import { NgModule } from '@angular/core';  
  2. import { CommonModule } from '@angular/common';  
  3.    
  4. @NgModule({  
  5.   imports: [  
  6.     CommonModule  
  7.   ],  
  8.   declarations: []  
  9. })  
  10. 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.
  1. 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!!
  1. 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.
 
Angular Routing Using Angular CLI 
 
Now we have added path and component name in the Routes.
  1. 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().
  1. @NgModule({  
  2.   exports: [RouterModule] ,  
  3.   imports: [  
  4.     CommonModule, [RouterModule.forRoot(routes)]  
  5.   ],  
  6.   declarations: []  
  7. })  
RouterModule.forChild()
 
forChild() is used for the submodules and lazy loaded submodules in the following way.
  1. @NgModule({  
  2.   exports: [RouterModule] ,  
  3.   imports: [  
  4.     CommonModule, [RouterModule.forChild(routes)]  
  5.   ],  
  6.   declarations: []  
  7. })  
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.
  1. <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.
 
Angular Routing Using Angular CLI 
 
The Router Output
 
While clicking on the "customer" link it will redirect into the customer component. 
 
 Angular Routing Using Angular CLI
 
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. 
  1. ng generate component PageNotFound --inline-template  
  2. ng g c PageNotFound -t  
We have modified the PageNotFound typescript file.
 
Angular Routing Using Angular CLI 
 
If you want to add bootstrap style in the application then import the following reference link in the style.css.
  1. @import url('https://unpkg.com/bootstrap@3.3.7/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.
  1. const routes: Routes = [{ path: '', component: EmployeeComponent },  
  2. { path: 'customer', component: CustomerComponent },  
  3. { path: '**', component: PageNotFoundComponent }];  
Output
 
Angular Routing Using Angular CLI
Download
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.