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 {}

In Next Blog

Angular Router 11: Can Activate Guard Made Easy

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

Check All lessons of Angular Intermediate Lessons

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