角度AuthGuardが動作していません

Question

私はCanActivateをAngular 5で試しましたが、現在は期待どおりに動作しており、エラーも発生しませんでした。これを解決するのを手伝ってください。 authguardでもインスタンス化されません。私はちょうどユーザがログインしているときだけルーティングが起こるようにしたいと思っています。ユーザがログインすると、私はsession storageに保存し、authガードで同じものを取得します。

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

    @Injectable() 
    export class AuthGuard implements CanActivate { 
    constructor(private router: Router, private snackBar: MatSnackBar) {} 

    canActivate(
    next: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | 
    boolean { 
     if (sessionStorage.getItem('token')) { 
      return true; 
     } else { 
      this.router.navigateByUrl('/login'); 
      this.snackBar.open('Please Login to Continue'); 
     } 
    } 
} 

---

//Routing 
    import { AuthGuard } from './guards/auth.guard'; 
    import { LoginComponent } from './components/login/login.component'; 
    import { RegistrationComponent } from 
    './components/registration/registration.component'; 
    import { UploadComponent } from './components/upload/upload.component'; 
    import { RouterModule, Routes, CanActivate, CanActivateChild } from '@angular/router'; 
    import { ProductComponent } from './components/product/product.component'; 
    import { CategoryComponent } from './components/category/category.component'; 

    export const appRoutes = [ 
     { 
      path: 'category', 
      component: CategoryComponent, 
      CanActivate: [ AuthGuard ] 
     }, 
     { 
      path: 'product', 
      component: ProductComponent 
     }, 
     { 
      path : 'upload', 
      component : UploadComponent 
     }, 
     { 
      path : 'register', 
      component: RegistrationComponent 
     }, 
     { 
      path : 'login', 
      component: LoginComponent 
     } 
    ]; 

---

//app.module 
    import { AuthInterceptor } from './interceptors/auth-interceptor.service'; 

    import { HttpClientModule } from '@angular/common/http'; 

    import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 
    import {BrowserAnimationsModule} from '@angular/platform- 
    browser/animations'; 


    import { HttpModule } from '@angular/http'; 
    import { ReactiveFormsModule } from '@angular/forms'; 
    import { MatNativeDateModule } from '@angular/material'; 
    import { RouterModule, Routes } from '@angular/router'; 
    import { appRoutes } from './routes'; 
    import {HTTP_INTERCEPTORS} from '@angular/common/http'; 
    import { AuthGuard } from './guards/auth.guard'; 

    @NgModule({ 
     declarations: [ 
     AppComponent, 
     CategoryComponent, 
     ProductComponent, 
     UploadComponent, 
     RegistrationComponent, 
     LoginComponent 
     ], 
     imports: [ 
     RouterModule.forRoot(appRoutes), 
     BrowserModule, 
     BrowserAnimationsModule, 
     FormsModule, 
     MatNativeDateModule, 
     Material, 
     HttpModule, 
     HttpClientModule, 
     ReactiveFormsModule 
     ], 
     providers: [ 
     CategoryService, 
     ProductService , 
     UploadService, 
     UserService, 
     AuthGuard, 
     { 
      'provide': HTTP_INTERCEPTORS, 
      'useClass': AuthInterceptor, 
      'multi': true, 
     }, 
    ], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

Answer 1

あなたはapp.moduleにそれを提供するのを忘れました。プロバイダ配列にを追加します。またcanActivateでなく、CanActivateでなければなりません。