angular - 类型错误 : guard is not a function

标签 angular typescript

我不知道我是否漏掉了一些细节,或者我是否做错了什么,但我找不到导致错误的原因。我的目标是做一些事情,以便在用户每次访问页面内的路由时不断检查用户是否登录。我使用 Angular 5。

应用程序模块:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/autenticacao/login.component';
import { AuthService } from './auth/auth.service';
import { RoutesInterceptor } from './auth/routes.interceptor';

import * as $ from 'jquery';

@NgModule({
  declarations: [ AppComponent, LoginComponent ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,

  ],
  bootstrap: [AppComponent],
  providers: [ AuthService, RoutesInterceptor, ],
})
export class AppModule {
}

Routes.intercpetor:

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

import { AuthService } from './auth.service';

@Injectable()
export class RoutesInterceptor implements CanActivate {

constructor(private auth: AuthService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.auth.isUserAuthenticated();
}
}

我的路线:

import { NgModule } from '@angular/core';
import { ExtraOptions, RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './pages/autenticacao/login.component';
import { RoutesInterceptor } from './auth/routes.interceptor';

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [RoutesInterceptor] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

enter image description here

最佳答案

另一个可能导致这种情况的问题是,如果您尝试使用 CanActivate 守卫作为另一种类型的守卫,例如 CanActivateChild

关于angular - 类型错误 : guard is not a function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48340989/

相关文章:

Angular 2 新 (RC1) 路由器。可以重用接口(interface)

angular - Angular 5 中的子路由不起作用

css - 如何覆盖 ng2 pdf 查看器 css

Angular -cli : How to use interpolation in a property binding

angular - 解决超过 6 个 forkJoin 参数的问题?

reactjs - 输入 react - Prop 为 `type` 或 `interface`

angular - Ng2 抛出 DirectiveNormalizer.normalizeLoadedTemplate 错误

使用 typescript 和 npm 将外部组件导入到 angular2 快速启动项目中

javascript - TypeScript 找不到命名空间

node.js - 如何使用 typescript 解决 lerna monorepo 中的 Sequelize 和 Angular 之间的冲突?