Angular AuthGuard错误

Question

我在app.module.ts上遇到了这个错误：

  

键入＆＃39;（{path：string; component：typeof LoginComponent;} | {path：string; canActivate :( typeof AuthG ...＆＃39;不能分配给＆＃39; Route [] ＆＃39 ;.     输入＆＃39; {path：string; component：typeof LoginComponent; } | {path：string; canActivate :(类型为AuthGu ...＆＃39;不能分配给＆＃39; Route＆＃39;。       输入＆＃39; {path：string; canActivate :( typeof AuthGuard）[]; component：typeof HeaderComponent; }＆＃39;不能分配类型＆＃39;路线＆＃39;。         对象文字只能指定已知属性，但可以激活＆＃39;类型＆＃39;路线＆＃39;中不存在。你的意思是写'canDeactivate＆＃39;？

这是我的AuthGuard：

import { Injectable } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

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

  canActivate(){
    let user;
    let token;
    if(this.authService.loggedIn(user, token)) {
        console.log('You are logged in.');
        return true;
      } else {
        this.router.navigate(['/']);
        console.log('Please login first.');
        return false;
      }
  }
}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '../material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, Validators } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ValidateService } from '../services/validate.service';
import { AuthService } from '../services/auth.service';
import { AuthGuard } from './guards/auth.guard';
import { FlashMessageModule } from 'angular-flash-message';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './templates/header/header.component';
import { FooterComponent } from './templates/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { DataTracerComponent } from './data-tracer/data-tracer.component';

const appRoutes:Routes =[
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'header',
    canActivate: [AuthGuard],
    component: HeaderComponent
  },
  {
    path: 'dashboard',
    canActivate:[AuthGuard],
    component: DashboardComponent
  },
  {
    path: 'profile',
    canActivate:[AuthGuard],
    component: ProfileComponent
  },
  {
    path: 'data-tracer',
    canActivate:[AuthGuard],
    component: DataTracerComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    ProfileComponent,
    DataTracerComponent,
  ],

  imports: [
    HttpModule,
    HttpClientModule,
    FlashMessageModule,
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
  ],
  providers: [ValidateService, AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }