Ultimate Angular Routing & Navigation Guide With Best Practices

#angular #routing #navigation #lazyloading

Building a single-page application sounds simple until you need to handle routing. I've seen Angular applications where every route was eagerly loaded (making the initial bundle huge), routes weren't protected (allowing unauthorized access), and navigation was handled inconsistently. When I learned how to properly configure Angular Router, it transformed how I build applications.

Angular Router is a powerful routing framework that enables navigation between views based on URL changes. It supports lazy loading (loading modules only when needed), route guards (protecting routes based on authentication or authorization), route parameters (dynamic segments like /products/:id), query parameters (for filtering and searching), and nested routes (for complex layouts). Understanding these features is crucial for building scalable Angular applications.

What is Angular Router?

Angular Router provides:

Client-side routing - Navigation without page refreshes
Lazy loading - Load modules on-demand for better performance
Route guards - Protect routes with authentication/authorization
Route parameters - Dynamic route segments
Query parameters - Optional filtering and search
Nested routes - Complex layouts with child routes
Route resolvers - Prefetch data before route activation

Basic Route Configuration

Set up routing in your app routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BusinessListComponent } from './business/business-list.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'business', component: BusinessListComponent },
  { path: '**', redirectTo: '/dashboard' } // Wildcard route (404)
];

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

Lazy Loading Modules

Implement lazy loading for better performance:

const routes: Routes = [
  {
    path: 'business',
    loadChildren: () => import('./business/business.module')
      .then(m => m.BusinessModule)
  },
  {
    path: 'users',
    loadChildren: () => import('./users/users.module')
      .then(m => m.UsersModule)
  }
];

Route Parameters

Access route parameters in components:

import { ActivatedRoute, Router } from '@angular/router';

export class BusinessDetailsComponent implements OnInit {
  businessId: number;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.businessId = +this.route.snapshot.paramMap.get('id');

    // Or subscribe to parameter changes
    this.route.paramMap.subscribe(params => {
      this.businessId = +params.get('id');
    });
  }
}