How to Create Routes in Angular: Simple Guide

In Angular, you create routes by defining an array of Route objects and passing it to RouterModule.forRoot() in your module imports. Each route maps a URL path to a component, enabling navigation within your app.

Syntax

To create routes in Angular, you define an array of route objects where each object has a path and a component. Then, you import RouterModule.forRoot(routes) in your main module to register these routes.

Parts explained:

• path: The URL segment to match.
• component: The Angular component to display when the path matches.
• RouterModule.forRoot(): Registers the routes at the root level.

typescript

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

Example

This example shows a simple Angular routing setup with two routes: the home page at '' and an about page at 'about'. Navigating to these paths displays the respective components.

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.html
// <nav>
//   <a routerLink="">Home</a> |
//   <a routerLink="about">About</a>
// </nav>
// <router-outlet></router-outlet>

// home.component.ts
// import { Component } from '@angular/core';
// @Component({ selector: 'app-home', template: '<h2>Home Page</h2>' })
// export class HomeComponent {}

// about.component.ts
// import { Component } from '@angular/core';
// @Component({ selector: 'app-about', template: '<h2>About Page</h2>' })
// export class AboutComponent {}

Output

When running, the app shows a navigation bar with 'Home' and 'About' links. Clicking 'Home' shows 'Home Page' heading, clicking 'About' shows 'About Page' heading.

Common Pitfalls

Common mistakes when creating routes include:

• Not importing RouterModule in the module, so routes don’t work.
• Forgetting to add <router-outlet> in the template, which is where routed components display.
• Using incorrect paths or missing the empty string '' path for the default route.
• Not exporting RouterModule from the routing module, causing routing directives to be unavailable.

typescript

/* Wrong: Missing RouterModule import */
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

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

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

Quick Reference

Summary tips for Angular routing:

• Define routes as { path: string, component: Component } objects.
• Use RouterModule.forRoot(routes) in your root module.
• Place <router-outlet> in your main template to show routed views.
• Use routerLink directive for navigation links.
• Always export RouterModule from your routing module.

Key Takeaways

Define routes as objects with path and component properties in an array.

Import RouterModule.forRoot(routes) in your main module to register routes.

Add in your template to display routed components.

Use routerLink directive for navigation links in templates.

Always export RouterModule from your routing module for use in other modules.