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

输入'{{path:string; component:typeof LoginComponent;} | {path:string; canActivate :( typeof AuthG ...'不能分配给'Route []' . 输入'{path:string; component: typeof LoginComponent;} | {path:string; canActivate :( typeof AuthGu ...'不能分配给'Route'类型 . 输入'{path:string; canActivate:(typeof AuthGuard)[]; component:typeof HeaderComponent;} '不能赋值为'Route' . 对象文字只能指定已知属性,但'canActivate'在'Route'类型中不存在 . 你的意思是写'canDeactivate'吗?

这是我的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 { }