How to Set Up Routing in Angular: Simple Guide

To set up routing in Angular, import RouterModule and define routes as an array of objects with path and component. Then add RouterModule.forRoot(routes) to your module imports and use <router-outlet> in your template to display routed components.

Syntax

Routing in Angular requires defining routes as objects with path and component. Import RouterModule and call RouterModule.forRoot(routes) in your module imports. Use <router-outlet> in your template to show the matched component.

• path: URL segment to match
• component: Component to display
• RouterModule.forRoot(): Registers routes at app root
• <router-outlet>: Placeholder for routed views

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 app with two routes: the home page at '' and an about page at 'about'. The AppComponent template uses <router-outlet> to display the routed components. Navigation links let users switch pages.

typescript/html

/* app-routing.module.ts */
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 { }


/* app.component.html */
<nav>
  <a routerLink="" routerLinkActive="active" aria-current="page">Home</a> |
  <a routerLink="about" routerLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>


/* home.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h2>Home Page</h2><p>Welcome to the home page!</p>'
})
export class HomeComponent { }


/* about.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '<h2>About Page</h2><p>This is the about page.</p>'
})
export class AboutComponent { }

Output

<nav><a href="#" aria-current="page">Home</a> | <a href="#">About</a></nav><h2>Home Page</h2><p>Welcome to the home page!</p>

Common Pitfalls

Common mistakes when setting up Angular routing include:

• Not importing RouterModule in the app module or routing module.
• Forgetting to add <router-outlet> in the template, so routed components don’t 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 fail.

html

/* Wrong: Missing router-outlet in app.component.html */
// Navigation links work but no component shows
<nav>
  <a routerLink="" routerLinkActive="active">Home</a>
  <a routerLink="about" routerLinkActive="active">About</a>
</nav>

/* Right: Add router-outlet to display routed components */
<nav>
  <a routerLink="" routerLinkActive="active">Home</a>
  <a routerLink="about" routerLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>

Quick Reference

Key points to remember when setting up Angular routing:

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

Key Takeaways

Import RouterModule and define routes with path and component to set up Angular routing.

Add in your template to display routed components.

Use routerLink directive for navigation links between routes.

Always export RouterModule from your routing module to enable routing features.

Check for missing router-outlet or incorrect paths if routing does not work.