How to use Angular routing
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Angular routing enables single-page application navigation by mapping URLs to components and managing browser history without page reloads. As the creator of CoreUI with over 25 years of development experience, I’ve implemented routing systems in countless enterprise Angular applications. The most effective approach is configuring routes in a routing module with proper component imports and router outlet placement. This provides seamless navigation with lazy loading capabilities and maintains application state during route transitions.
Configure Angular routing with RouterModule to enable navigation between components in your single-page application.
// 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'
import { ContactComponent } from './contact/contact.component'
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', redirectTo: '/home' }
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// app.component.html
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>
This routing setup defines route paths mapped to components, includes a default redirect to home, and handles unknown routes with a wildcard. The routerLink directive creates navigation links, routerLinkActive adds CSS classes to active links, and router-outlet displays the routed component content. The RouterModule.forRoot() configures the router with the defined routes.
Best Practice Note:
This is the foundation routing pattern used in all CoreUI Angular templates for scalable navigation. Always include a wildcard route for 404 handling and consider implementing route guards and lazy loading for large applications to optimize performance.
