Angular 9 Create Routing Module

Hello Dev.

nowadays, i would really like to reveal you angular 9 routing module instance. in case you need to look instance of how to create module in angular 9 you then are a proper place. it's simple instance of angular 9 app routing module. you'll discover ways to create routing module in angular 9.

i can provide you with one by one guidance of the way to create module with routing in your angular 9 utility. i can give you quite simple instance so that you can easily recognize the way it works.

In this situation, i can sincerely create one admin module and internal admin module we can create HOME, user and post component as a way to call module route file. you need to just follow few step and it's going to done and layout will be as like bellow...

Step 1: Create New App

You can easily create your angular app using bellow command...

ng new my-module-app

Step 2: Create Admin Module

After creating successfully app, we need to create module using angular cli command. angular provide command to create module with routing in angular application. so let's run bellow command to create admin module...

ng g module admin --routing

run successfully command, it will create files as like bellow path...

Step 3: 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 4: 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/admin/admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
import { PostComponent } from './post/post.component';

const routes: Routes = [
  {path : '', component : HomeComponent},
  {path : 'user', component : UserComponent},
  {path : 'post', component : PostComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

Step 5: 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, I used bootstrap class on this file. so let's update it as like bellow...
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 6: Import Module to module.ts file

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AdminModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we are ready to run our example, you can run by following command...

ng serve

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.