Types of parameters 'activatedRoute' and 'route' are incompatible

Question

I have some guard like this details.guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRoute } from '@angular/router';

import { AuthService } from '/auth-service';

import { AuthorizationRoles } from './constants';
import { Tags } from './tags';

/**
 * This will guard route
 */
@Injectable()
export class DetailsGuardService implements CanActivate {

  constructor(private authService: AuthService) { }

  /**
   * Returns whether or not user can see details
   */
  canActivate(activatedRoute: ActivatedRoute): boolean {
    const type = activatedRoute.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    }
  }
}

Error i am getting

ERROR in details.guard.service.ts(20,3): error TS2416: Property 'canActivate' in type 'DetailsGuardService' is not assignable to the same property in base type 'CanActivate'. Type '(activatedRoute: ActivatedRoute) => boolean' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | UrlTree | Observable | Promise'. Types of parameters 'activatedRoute' and 'route' are incompatible. Property 'snapshot' is missing in type 'ActivatedRouteSnapshot' but required in type 'ActivatedRoute'.

I dont know where to look, any help will be nice, thanks

Answer 1

Firstly, activated route needs to be injected into the constructor. But you should be using ActivatedRouteSnapshot

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>

You should also be return false when you should not be able to navigate.

Consider the following code:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const type = route.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    } else
    {
        return false;
    }


  }