Understanding Angular Routing and Navigation with Step-by-Step Tutorial

Navigating through an Angular application can sometimes feel like exploring a complex maze. One of the most challenging tasks in Angular development is mastering routing, which is why in this blog, we’re here to guide you through the best practices of Angular routing and navigation.

What is Angular Routing?

Users can navigate between pages using Angular’s routing feature. For instance, Angular’s routing enables users to transition from the home page to pages like ‘contact’ or ‘about’ seamlessly.

Let’s Build an Angular Application to Understand Routing Better

Note: Here, we’ll put feature routing into practice, thus we’ll make two modules as follow;

1. user
2. admin

Instead of creating all of your routes in the app routing file, it is better practice to create feature routing. 

Step 1. Use the following command to create an angular application.

ng new angular-routing

Step 2. Next, we’ll create two modules with routing enabled: user and admin.

ng generate module admin --routing

ng generate module user --routing

The routing flag creates a routing file for your module.

As a developer, you should refrain from adding routes inside modules; instead, it’s recommended to establish separate routing files.

Step 3. Let’s create some components in the user and admin modules.

ng g c admin/home

ng g c user/home

Step 4. Open app-routing.module file and paste the following code.

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

const routes: Routes = [
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then((m) => m.AdminModule),
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
},
];

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

As lazy loading is an excellent practice for quick loading, we will utilize it here. Lazy loading improves the application’s performance by loading only the required modules.

Step 5. Open the user-routing.module file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserRoutingModule {}

We will create the routes for the user module within the routing file, The pathMatch property will match the exact route, and you can create multiple routes inside the routes array.

Because Angular renders the first matching route, the order of the routes is crucial. More precise routes should be placed before less specific routes.

Step 6. Open the admin-routing.module file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AdminRoutingModule {}

Step 7. Open the app.component.html file and add the following tag.

<router-outlet></router-outlet>

A directive called router-outlet aids Angular in inserting matching path components.

Step 8. Now let’s run our app.

Ng serve

Because nothing has been added to the app component, you might see a blank screen. Let’s navigate to http://localhost:4200/user/home this route will render the home component from the user module.

We implemented the feature routing using a step-by-step tutorial in the above example.

Related read: Things that help to improve your Angular Code

Let’s Create a Wild Card Route

Due to the possibility that a user may attempt to navigate to a route that does not exist, it is crucial to create wild card routes.

Let’s build a component called page not found that will be displayed when a user attempts to visit a route that doesn’t exist.

ng g c pagenotfound

Next, open the app-routing.modules file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';

const routes: Routes = [
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then((m) => m.AdminModule),
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
},
{
path: '**',
component: PagenotfoundComponent,
},
];

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

We can create a wildcard route by adding a path with two asterisks at the end of all of your routes; when this happens, Angular will redirect to the wildcard route if it fails to find any other paths that match.

Related read: How To Implement Angular Elements?