Angular - Routing Module

---

---

This chapter will discuss the "Angular Routing Module". It is quite similar to routing concepts, which we have already covered in the previous angular chapter.

Routing Module in Angular

In Angular, a Routing Module is a special module that handles the configuration and management of routes within an application. It defines the routes (paths) for the various components to navigate between views or components.

You can define application routing logic separately from the rest of the application, which will react to the user interaction.

Important Points of Routing Module

Following are a few important points about the Routing Module you must know:

Older Angular Version:

• In older angular version, the CLI automatically created a routing module named as app-routing.module.ts while creating a new application, where you can define routes to navigate between various components.

Latest Angular Version:

• In latest angular version, the CLI does not automatically create a routing module but instead creates a file named app.routes.ts to define the routes but it is not a routing module.
• This file contains the route configuration array, which is then imported into a separate routing module, such as AppRoutingModule, to configure the RouterModule.

Important! The following creation steps of the routing module will be followed as per the "latest Angular version".

Creating Routing Module in Angular

To create a routing module in your existing or new Angular application, follow and implement the steps given below:

Step 1: Open or Create a new Angular project

Open any existing angular project in your preferred code editor (e.g., vs code) or create a new application by running the following command:

ng new myapp

Step 2: Create app.routes.ts

Create a new file named app.routes.ts within the src/app folder (if it is not already created by Angular CLI):

src/app -> app.routes.ts

Step 3: Update the app.routes.ts

Open the app.routes.ts file in your code editor. If it is empty, add the given code below:

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

export const routes: Routes = [
   
];

Step 4: Create Standalone Components

Create two standalone components named Home and About using the following commands:

ng generate component Home
ng generate component About

Step 5: Define routes

Update the app.routes.ts to define the routing paths for the new components:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'about', component: AboutComponent}
];

How to use Routing Module in Angular?

We have created a routing module and defined the routes for the Home and About components to navigate when the URL changes. As the routing module is ready to use, we need to import some necessary modules, directives, and components to use it in our application.

Follow the steps given below to make it ready for use in your application:

Step 1: Configure routing in AppConfiguration

Open the app.config.ts file in your code editor import routes and add the same in the providers array:

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Step 2: Update the app.component.ts

Open the app.component.ts file in your code editor import the necessary modules (e.g., RouterModule, RouterOutlet directive, and components), and add the same within the imports array:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule, RouterOutlet } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
     CommonModule, 
     RouterOutlet, 
     RouterModule, 
     HomeComponent, 
     AboutComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'myApp';
}

Step 3: Update the app.component.html

Open the app.component.html file and update it with the following code:

<h3>Routing Module Example</h3>
<a routerLink="home">Home</a>
<a routerLink="about">About</a>
<hr>
<router-outlet></router-outlet>

Step 4: Update the app.component.css

Open the app.component.css file and place the code below:

a{
    text-decoration: none;
    margin: 10px 10px;
    background-color: green;
    padding: 10px ;
    color: white;
}
hr{
    margin: 20px 0px;
    padding: 2px;
}

Step 5: Run the Application:

Now open your preferred browser (e.g., chrome) and navigate to the localhost:4200 URL to see the output: