Angular 2 – How to Configure Route Definitions – Part 1

This blog series would be used to describe different techniques which can be used to configure route definitions in Angular apps. The routing can be defined based on following three patterns:

• Route definitions within AppModule
• Routing defined as a separate module at app root level
• Routing module defined within feature modules (recommended for enterprise apps)

In this blog, we will learn different aspects related with creating route definitions within AppModule. The most simple way of configuring route definitions is creating route definitions within AppModule file such as app.module.ts which is found at root level. This technique can be used for only learning purpose. When creating complex or enterprise apps, this is not the recommended way. The following is the what needs to be done to create route definitions within app.module.ts:

Import the Routing Libraries

The first step is to import the routing library such as RouterModule and Routes

import { RouterModule, Routes } from '@angular/router';

Create Route Definitions

Create route definitions such as following in app.module.ts. Make sure to include route definitions for handling invalid routes using components such as PageNotFoundComponent and, default route to be used when app launches with empty path.

const appRoutes: Routes = [
    { path: 'register', component: UserRegistrationComponent, data: {title: 'New User Registration'} },
    { path: 'login', component: LoginComponent },
    { path: 'doctors', component: DoctorListComponent, data: { title: 'Doctors Information' } },
    { path: 'index', component: HomeComponent },
    { path: '', redirectTo: '/index', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

Configure Router Module

Lastly, configure router module with RouterModule.forRoot as part of @NgModule meta definition.

@NgModule({
    imports: [..., RouterModule.forRoot(appRoutes),],
    declarations: [ AppComponent, ...],
    providers: [ ...],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Greater details in relation with above and much more can be obtained from my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.

• Author
• Recent Posts

Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com

Follow me

Latest posts by Ajitesh Kumar (see all)

• Model Parallelism vs Data Parallelism: Examples - April 11, 2024
• Model Complexity & Overfitting in Machine Learning: How to Reduce - April 10, 2024
• 6 Game-Changing Features of ChatGPT’s Latest Upgrade - April 9, 2024