Angular CanActivate Guard错误

Question

我在app.module.ts上收到此错误消息

  

[ts] Type'（{path：string; component：typeof LoginComponent;} | {   路径：字符串; canActivate :( typeof AuthG ...'不能分配给类型   '路线[]'。输入'{path：string; component：typeof LoginComponent; }   | {path：string; canActivate :(类型的AuthGu ...'不能分配给   输入'路线'。       输入'{path：string; canActivate :( typeof AuthGuard）[]; component：typeof HeaderComponent; }'不能分配给类型   '路线'。         对象文字只能指定已知属性，但“路径”类型中不存在“canActivate”。你的意思是写   'canDeactivate'？

我检查了我的防护文件，没有发生错误。但是在我的app.module.ts中，返回一个类似的错误。这是我的AuthGuard：

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

class Permissions{
  canActivate(user, token):boolean{
    return true;
  }
}

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    let user;
    let token;
    let level;
    if (this.authService.loggedIn(user, token, level)) {
      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 { CompanyService } from '../services/company.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';
import { LoggedInComponent } from './snackbar/logged-in/logged-in.component';
import { IndexCompanyComponent } from './company/index-company/index-company.component';
import { CreateCompanyComponent } from './company/create-company/create-company.component';
import { ViewCompanyComponent } from './company/view-company/view-company.component';
import { UpdateCompanyComponent } from './company/update-company/update-company.component';
import { AdminIndexComponent } from './admin/admin-index/admin-index.component';
import { AdminSidenavComponent } from './templates/admin-sidenav/admin-sidenav.component';
import { AdminUsersComponent } from './admin/admin-users/admin-users.component';
import { AdminCompaniesComponent } from './admin/admin-companies/admin-companies.component';
import { AdminReportComponent } from './admin/admin-report/admin-report.component';
import { AdminGuard } from './guards/admin.guard';

const appRoutes:Routes =[
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'header',
    canActivate: [AuthGuard],
    component: HeaderComponent
  },
  {
    path: 'admin',
    canActivate: [AuthGuard, AdminGuard],
    component: AdminIndexComponent
  },
  {
    path: 'admin/users',
    canActivate: [AuthGuard, AdminGuard],
    component: AdminUsersComponent
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    component: DashboardComponent 
  },
  {
    path: 'profile',
    canActivate: [AuthGuard],
    component: ProfileComponent
  },
  {
    path: 'data-tracer',
    canActivate: [AuthGuard],
    component: DataTracerComponent
  },
  {
    path: 'company',
    canActivate: [AuthGuard],
    component: IndexCompanyComponent
  },
  {
    path: 'company/addCompany',
    canActivate: [AuthGuard],
    component: CreateCompanyComponent
  },
  {
    path: 'company/updateCompany/:id',
    canActivate: [AuthGuard],
    component: UpdateCompanyComponent
  },
  {
    path: 'companies/:id',
    canActivate: [AuthGuard],
    component: ViewCompanyComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    ProfileComponent,
    DataTracerComponent,
    LoggedInComponent,
    IndexCompanyComponent,
    CreateCompanyComponent,
    ViewCompanyComponent,
    UpdateCompanyComponent,
    AdminIndexComponent,
    AdminSidenavComponent,
    AdminUsersComponent,
    AdminCompaniesComponent,
    AdminReportComponent,
  ],

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