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