Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass?

Question

Hello i'm new at angular 6 and i face a problem about the authentication to extract users from not go to any page without login and the problem i faced is

Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass? Type 'NeedAuthGuard' is missing the following properties from type 'CanActivate': path, route [2720]

here is my code

           import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { LoginComponent } from '../Component/login/login.component';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})//NeedAuthGuard
export class ServiceTService {
  constructor(
    private http: HttpClient
  ) {
  }
  users: any = { 
    id: String,
    Email:String,
    Password: Number
  };
  getUser(): Observable<any> {
    return this.http.get<any>("http://localhost:3000/users");

  }
}


@Injectable()
export class NeedAuthGuard implements CanActivate {

  constructor(private customerService: LoginComponent, private router: Router)   {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    const redirectUrl = route['/Store'];

    if ( this.customerService.UserIsLogin) {
      return true;
    }
    this.router.navigateByUrl(
      this.router.createUrlTree(
        ['/login'], {
          queryParams: {
            redirectUrl
          }
        }
      )
    );
    return false;
  }
}

- app.module.ts

-service

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin, DialogOverviewExampleDialog } from './Component/login/login.component';
import { RouterModule, ROUTES, Routes, ActivatedRouteSnapshot } from '@angular/router';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { StoreComponent } from './Component/store/store.component';
import { NAVComponent } from './Component/nav/nav.component';
import { MatDialogModule, MatDialogRef } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NeedAuthGuard } from './Service/service-t.service';
const Router: Routes = [
  { path: "Login", component: LoginComponent, data: { requiresLogin: true } },
  { path: "Store", component: StoreComponent, data: { requiresLogin: true } },
  { path: '**', component: LoginComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    StoreComponent,
    NAVComponent,
    DialogOverviewExampleDialog,
    DialogOverviewExampleDialogPassword,
    DialogOverviewExampleDialogLogin,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(Router)
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogOverviewExampleDialog, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin]

})
export class AppModule { }

login component

import { Component, OnInit, ViewChild, AfterViewInit, Inject, Injectable } from '@angular/core'; import { ServiceTService } from '../../Service/service-t.service'; import { RouterModule,Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'; import { Directive, ElementRef, Input } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { CanActivate } from '@angular/router/src/utils/preactivation'; import { AppComponent } from 'src/app/app.component'; import { StoreComponent } from '../store/store.component'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA,MatDialogModule } from '@angular/material'; import { state } from '@angular/animations';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})  

export class LoginComponent implements OnInit   {
  users: any = { 
    id: "",
    Email:"",
    Password:"", 
    requiresLogin: false
  };
  UserIsLogin:boolean = false; 
  constructor(
    private service: ServiceTService,
    private routerT : Router,
    private dialog: MatDialog
  ) {    
  }
  isLogin( Login) :boolean{ 
    this.UserIsLogin= Login;
    return this.UserIsLogin; 
  }
  onSubmit( userLogin) {
     this.service.getUser().subscribe( (result: any) => {
       if(userLogin.Email==""){ this.dialog.open(DialogOverviewExampleDialog, {width: '350px'} )  }
       if(userLogin.Password==''){this.dialog.open(DialogOverviewExampleDialogPassword, {width: '350px'})}
       for (let users of result){
         if( users.Email == userLogin.Email && users.Password == userLogin.Password ){
            alert("currect"); 
           this.isLogin(true);
           return this.routerT.navigate(['/Store']);
           }else {
                  this.dialog.open(DialogOverviewExampleDialogLogin, {width: '350px'})}
                  this.isLogin(false);
                  return false; 
                }
        });
  }
  ngOnInit() {
  }
}

@Component({
  selector: 'DialogOverviewExampleDialog',
  templateUrl: 'dialog-Error.html'
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'DialogOverviewExampleDialogPassword',
  templateUrl: 'dialog-Password.html'
})
export class DialogOverviewExampleDialogPassword {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogPassword>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'DialogOverviewExampleDialogLogin',
  templateUrl: 'dialog-incorrectLogin.html'
})
export class DialogOverviewExampleDialogLogin {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogLogin>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

Lynx 242 Lynx 242 · Accepted Answer · 2019-01-15T10:30:14

I guess you import from the wrong path. Do not try to import CanActivate this way:

import { CanActivate } from '@angular/router/src/utils/preactivation';

but:

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

So that your import looks the following

import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router';

Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass?

1 Answers