Angular Router 10: Creating a separate module for Routing

In the previous blog, we discussed
Angular Router 09: Configure Page not found in Router

In today’s blog, we will see how to create a module for our routing configuration.

Follow these 3 steps to easily understand how to create a separate module.

  • Import Section
  • routes and NgModule section
  • Export section

Here’s the live Working code example:
https://stackblitz.com/edit/angular-router-module-export

Import section

To create a module we import, NgModule, To declare our router section we import routes and routerModule
Then we import all our components that is required for to route.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NormalRouteComponent } from './normal-route/normal-route.component';

Routes and NgModule section

We declare routes and configure the components.
in @NgModule decorator, we import our router module. and finally, in export section of NgModule, we give “RouterModule”

@NgModule({
imports: [RouterModule.forRoot(routes)],
declarations: [],
exports: [RouterModule],
})

Export section

We export as a class, as I exported the class below code snippet.

Once we export, We import out routing module class and declare it in import section.


// here we import the routing module
import { AppRoutingModule } from './app-routing.module';

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

— — — — — — — — — End Of Lecture — — — — — — —

Check All lessons of Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yuvaraj S

Yuvaraj S

17 Followers

Passionate Angular Developer. I post programming content regarding, Frontend Development with working example. ie, Angular, Html, CSS, Javascript