Class 'AuthGaurd' incorrectly implements interface CanActivate

Question

I am beginner and learning Angular From tutorials as i follow those tutorials and when i implement interface CanAcivate as he did in tutorial its show error

Class 'AuthGaurd' incorrectly implements interface 'CanActivate'. Property 'canActivate' is missing in type 'AuthGaurd' but required in type 'CanActivate'.ts(2420)

Here is implementation of Canactivate

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  CanActivate(){
    return this.auth.user$.map(user => {
      if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
  }
}`

And here is Imports

 import { Injectable } from '@angular/core';
    import { AuthService } from './auth.service';
    import { CanActivate } from '@angular/router/src/utils/preactivation';
    import { Router } from '@angular/router';
    import 'rxjs/add/operator/map';

I change Import from import { CanActivate } from '@angular/router/src/utils/preactivation'; to import { CanActivate } from '@angular/router; But not work

Also I add following in canActivate as i watch one answer on StackOverflow but it also not work for me

 CanActivate(next: ActivatedRouteSnapshot,
 state: ActivatedRouteSnapshot): Observable<boolean>

Answer 1

Note the camel case of the canActivate function and use the necessary parameters to implement the function.