Mean 12 Angular Routing Mean

title: "Angular Routing — Navigating the MEAN Frontend Application" description: "Learn Angular routing for the MEAN Stack with route configuration, lazy loading, route guards, and passing data between views." weight: 22 date: 2026-06-28 lastmod: 2026-06-28 tags: [frameworks, mean]

Angular Router enables navigation between views in a single-page application, with support for lazy loading, route guards, data resolvers, and parameterized routes.

What You'll Learn

You will configure Angular routes with lazy loading, route parameters, guards for authentication, and resolvers for pre-fetching data.

Why It Matters

Proper routing organizes your application into logical views, improves performance through lazy loading, and controls access through guards.

Real-World Use

DodaZIP's Angular frontend uses lazy-loaded modules for each section (Dashboard, Files, Settings, Admin) with route guards for role-based access control.

flowchart LR
    A[App Routes] --> B[Public Routes]
    A --> C[Protected Routes]
    B --> D[/login]
    B --> E[/register]
    C --> F[Auth Guard]
    F --> G[/dashboard]
    F --> H[/files]
    F --> I[/settings]
    style A fill:#4a90d9,color:#fff
    style F fill:#4a90d9,color:#fff

Route Configuration

Define routes with lazy loading for feature modules.

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadComponent: () => import('./components/login/login.component')
      .then(m => m.LoginComponent),
    title: 'Login'
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./components/dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
    canActivate: [authGuard],
    title: 'Dashboard'
  },
  {
    path: 'users',
    loadComponent: () => import('./components/user-list/user-list.component')
      .then(m => m.UserListComponent),
    canActivate: [authGuard],
    title: 'Users'
  },
  {
    path: 'users/:id',
    loadComponent: () => import('./components/user-detail/user-detail.component')
      .then(m => m.UserDetailComponent),
    canActivate: [authGuard],
    title: 'User Details'
  },
  {
    path: 'products',
    loadChildren: () => import('./routes/product.routes')
      .then(m => m.productRoutes),
    canActivate: [authGuard],
    title: 'Products'
  },
  {
    path: '**',
    loadComponent: () => import('./components/not-found/not-found.component')
      .then(m => m.NotFoundComponent),
    title: 'Page Not Found'
  }
];

Expected output: Routes are configured with lazy loading. Each route loads its component only when navigated to. Auth guard protects private routes. The wildcard route handles 404s.

Lazy Loading Child Routes

Organize related routes in a separate file.

// src/app/routes/product.routes.ts
import { Routes } from '@angular/router';

export const productRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('../components/product-list/product-list.component')
      .then(m => m.ProductListComponent),
    title: 'Products'
  },
  {
    path: 'new',
    loadComponent: () => import('../components/product-form/product-form.component')
      .then(m => m.ProductFormComponent),
    title: 'New Product'
  },
  {
    path: ':id',
    loadComponent: () => import('../components/product-detail/product-detail.component')
      .then(m => m.ProductDetailComponent),
    title: 'Product Details'
  },
  {
    path: ':id/edit',
    loadComponent: () => import('../components/product-form/product-form.component')
      .then(m => m.ProductFormComponent),
    title: 'Edit Product'
  }
];

Expected output: Product routes are organized in a separate file. The main routes file imports them via loadChildren. Each route is lazy-loaded.

Route Guard

Protect routes with authentication guards.

// src/app/guards/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { AuthService } from '../services/auth.service';

export const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  return router.parseUrl('/login');
};

Expected output: The auth guard checks if the user is authenticated. If not, it redirects to the login page. Protected routes cannot be accessed without authentication.

Route Resolver

Pre-fetch data before navigating to a route.

// src/app/resolvers/user.resolver.ts
import { Injectable, inject } from '@angular/core';
import { ResolveFn, ActivatedRouteSnapshot } from '@angular/router';
import { UserService, User } from '../services/user.service';

export const userResolver: ResolveFn<User> = (route: ActivatedRouteSnapshot) => {
  const userService = inject(UserService);
  const id = route.paramMap.get('id')!;
  return userService.getUser(id);
};

// Usage in routes
{
  path: 'users/:id',
  loadComponent: () => import('./components/user-detail/user-detail.component')
    .then(m => m.UserDetailComponent),
  resolve: { user: userResolver }
}

// Component accesses resolved data
import { ActivatedRoute } from '@angular/router';

export class UserDetailComponent implements OnInit {
  user!: User;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user = data['user'];
    });
  }
}

Expected output: The resolver fetches user data before navigating to the detail page. The component receives the pre-fetched data through the route's data property.

Router Navigation

Navigate programmatically from components.

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

export class ProductListComponent {
  constructor(private router: Router) {}

  viewProduct(id: string) {
    this.router.navigate(['/products', id]);
  }

  editProduct(id: string) {
    this.router.navigate(['/products', id, 'edit']);
  }

  goBack() {
    this.router.navigate(['/dashboard']);
  }
}

Expected output: Programmatic navigation using the Router service. Users navigate to detail and edit views. The browser back button works normally.

Common Mistakes

1. Not using lazy loading for all feature routes: Without lazy loading, all component code is bundled together, increasing initial load time.

2. Forgetting to handle the 404 route: Always add a wildcard route (**) that shows a not-found page.

3. Not guarding lazy-loaded routes: Guards should be applied to lazy-loaded routes. Each child route needs protection if the section is private.

4. Using absolute paths incorrectly: Route paths starting with / are absolute. Without /, they are relative to the current route.

5. Not using the title property: Setting the title property in routes updates the browser tab title automatically.

Practice Questions

1. How do you configure a route with a parameter?

Add /:paramName to the path. Access it via ActivatedRoute.paramMap.

2. What is lazy loading and why use it?

Lazy loading defers loading component code until the route is navigated to. It reduces the initial bundle size.

3. How do you protect routes from unauthorized access?

Use route guards (CanActivate). The guard returns true to allow access or a UrlTree to redirect.

4. What is a route resolver used for?

It pre-fetches data before navigating to a route. The component receives the data through route.data.

5. How do you navigate programmatically in Angular?

Inject the Router service and call router.navigate() with the route path and parameters.

Challenge

Create a complete routing structure for an e-commerce application with: public routes (home, products, product detail), protected routes (cart, checkout, orders), admin routes (product management, user management), and a 404 page.

Frequently Asked Questions

Mini Project

Create a routing structure for a blog with: public routes (home, posts list, post detail), protected routes (create/edit posts, dashboard), admin routes (user management), and resolvers that pre-fetch post data.

What's Next

Learn to build Angular Forms MEAN for creating and editing data in the MEAN application.