ItSolutionStuff.com

In this short tutorial, we will share the quick and straightforward way to create the angular 18 routing module. you will learn how to create a separate routing module in angular 18. Here you will learn how to make a routing module in angular 18. If you have a question about how to create a router module in angular 18 then I will give a simple example with a solution.

I will give you step-by-step instructions on how to create a module with routing in your angular 18 application. I will give you a very simple example so you can easily understand how it works.

In this example, I will simply create one admin module and inside the admin module, we will create a home, user, and post component that will call the module route file. you have to just follow a few steps and it will be done and layout will be as below:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-module-app

Step 2: Create Component For Module

Now we will add new component to our admin module using bellow command, so let's create home, user and post component for admin module:

ng g component admin/home
ng g component admin/user
ng g component admin/post

run successfully command, it will create folder with files as like bellow path:

src/app/admin/home/*
src/app/admin/user/*
src/app/admin/post/*

There is html file to all three component. so you can simple update that file with your content to checking demo if you want.

Step 3: Add Route for Component

In this step, we will simply add route with created component. so we have to update our admin-routing module file as like bellow code:

src/app/app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './admin/home/home.component';
import { UserComponent } from './admin/user/user.component';
import { PostComponent } from './admin/post/post.component';
  
export const routes: Routes = [
  {path : 'user', component : UserComponent},
  {path : 'post', component : PostComponent},
  {path : '', component : HomeComponent}
];

Step 4: Update Component HTML File

here, we have to update our app component html file, we need to add links of all route with router-outlet, so let's update it as like bellow:

I used bootstrap class on this file. so if you want to add than then follow this link too: Install Bootstrap 5 to Angular 18.

src/app/app.component.html

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Admin Panel</a>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home" routerLink="/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#user" routerLink="/user">User</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#post" routerLink="/post">Post</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
   
<div class="container">
    <router-outlet></router-outlet>
</div>

Step 5: Import Module to app.components.ts file

In last step, we will simply import our module to app.components.ts file, so, let's update that file as like bellow:

src/app/app.components.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouterOutlet } from '@angular/router';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'route';
}

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

I hope it can help you...