JS
Angular JS
Angular 14 Routing Module Tutorial Example
This tutorial will give you example of angular 14 routing module create. We will use how to create separate routing module in angular 14. you will learn how to make routing module in angular 14. We will use how to create router module in angular 14.
- TAGS
- Angular
- Angular 14
- 4.5/5.0
- Last updated 08 September, 2022
- By Admin
I will give you step-by-step instructions on how to create a module with routing in your angular 11 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:
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:
src/app/admin/admin.module.ts src/app/admin/admin-routing.module.ts
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, so let's update it as like bellow:
src/app/app.component.html
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 { }
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...