Angular Route Guards And Resolver Services Complete Guide

Step-by-Step Example: Angular Route Guards

Prerequisites

Ensure you have Angular CLI installed. If not, install it using:

npm install -g @angular/cli

1. Create a New Angular Project

Let's start by creating a new Angular project:

ng new route-guards-example
cd route-guards-example

2. Generate Some Components

Generate a couple of components for our application:

ng generate component login
ng generate component dashboard

3. Configure Routes

In the app-routing.module.ts file, set up routes to the LoginComponent and DashboardComponent. Define a sample route guard:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth.guard'; // This will be created in the next step

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

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

4. Create the AuthGuard

Create a new file for the AuthGuard. This service will intercept requests to the DashboardComponent and ensure the user is authenticated:

ng generate guard auth

By default, Angular CLI generates a service named auth.guard.ts. Here’s an example implementation:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Assume user is logged in based on some condition
    let isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';

    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

5. Update LoginComponent for Testing

Update the LoginComponent to simulate logging in:

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

@Component({
  selector: 'app-login',
  template: `
    <div>
      <h1>Login</h1>
      <button (click)="login()">Login</button>
    </div>
  `
})
export class LoginComponent {

  constructor(private router: Router) {}

  login() {
    sessionStorage.setItem('isLoggedIn', 'true');
    this.router.navigate(['/dashboard']);
  }
}

6. Test the Route Guard

Run the application using ng serve and navigate to /dashboard. Since you are not logged in initially, you should be redirected to the /login page. After clicking the "Login" button, the isLoggedIn flag should be set, allowing you to navigate to /dashboard.

Step-by-Step Example: Angular Resolver Services

Prerequisites

Ensure you have Angular CLI installed. If not, install it using:

npm install -g @angular/cli

1. Create a New Angular Project

Let’s set up a new project for the Resolver Service example:

ng new resolver-example
cd resolver-example

2. Generate Some Components and Services

Generate a couple of components and a service for our application:

ng generate component profile
ng generate service user

3. Configure Routes

In the app-routing.module.ts file, set up routes to the ProfileComponent. Define a resolver service:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import { UserResolver } from './user.resolver'; // This will be created in the next step

const routes: Routes = [
  { path: 'profile/:id', component: ProfileComponent, resolve: { user: UserResolver } },
  { path: '', redirectTo: '/profile/1', pathMatch: 'full' }
];

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

4. Create the UserResolver

Create a new file for the UserResolver. This service will fetch data for the user profile before the ProfileComponent is activated:

ng generate resolver user

By default, Angular CLI generates a service named user.resolver.ts. Here’s an example implementation:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class UserResolver implements Resolve<any> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const userId = route.paramMap.get('id');
    return this.userService.getUserById(Number(userId));
  }
}

5. Implement the UserService

Next, implement a UserService to fetch the user data. For simplicity, we will return a mock user object:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() {}

  getUserById(id: number): Observable<any> {
    const mockUser = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    return of(mockUser);
  }
}

6. Update ProfileComponent to Use Resolved Data

Finally, update the ProfileComponent to consume the resolved user data:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-profile',
  template: `
    <div>
      <h1>User Profile</h1>
      <p>ID: {{ user?.id }}</p>
      <p>Name: {{ user?.name }}</p>
      <p>Email: {{ user?.email }}</p>
    </div>
  `,
  styles: []
})
export class ProfileComponent implements OnInit {
  user: any;

  constructor(private route: ActivatedRoute) {}

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

7. Test the Resolver

Run the application using ng serve and navigate to /profile/1. The resolver should fetch the user data and display it in the ProfileComponent.