找不到模块"./组件/登录/身份验证回调激活保护"

Question

我在尝试将可注入服务导入组件时遇到问题。尽我所能尝试，我无法让系统看到AuthenticationCallbackActivateGuard。

我使用的是Steve Sanderson基于 ASP.Net Core的Angular 2模板的修改版本。它在 app.module 中导入得很好，但是一旦我尝试在我的登录管理器组件上拉动它，它就找不到它了。

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
import { AuthenticationCallbackActivateGuard } from './components/login/authenticationcallbackactivateguard';

@NgModule({
    bootstrap: [AppComponent, AuthenticationCallbackActivateGuard ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        AuthenticationCallbackActivateGuard,
        LoginComponent,
        HomeComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', component: HomeComponent, canActivate: [AuthenticationCallbackActivateGuard] },
            { path: 'home', component: HomeComponent },
            { path: '#', component: LoginComponent},
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'login', component: LoginComponent },
            { path: 'signin-auth0', component:HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

login.component.ts

import { Component } from '@angular/core';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';
import { AuthCallback } from './components/login/authenticationcallbackactivateguard'; //<-- Error is here
let Auth0Lock = require('auth0-lock').default;

let options = {
    auth: {
        redirect: true,
        rememberLastLogin: true
    },
    languageDictionary: {
        title: "Login"
    },
 theme: {
     logo: 'http://www.sapientsoft.co.za/img/sapient-logo.png',
     primaryColor: '#2E5EAC',
  } 
};  

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    providers: []
})  
//providers: [Auth]
export class LoginComponent {
    constructor(authCallback: AuthCallback)
    {
    }
    lock = new Auth0Lock('WnB39V8Rwss366sATm01HbVcWijm96Vd', 'sapientfranko.eu.auth0.com',options);
    jwtHelper : JwtHelper = new JwtHelper();

    login()
    {

        this.lock.show("authenticated", (authResult) => {
            localStorage.setItem('profile', JSON.stringify(authResult.profile));
            localStorage.setItem('id_token', authResult.idToken);
            console.log(
                this.jwtHelper.decodeToken(authResult.id_token),
                this.jwtHelper.getTokenExpirationDate(authResult.id_token),
                this.jwtHelper.isTokenExpired(authResult.id_token)
            );
            this.loggedIn();  
        });

    }
    logOut()
    {
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');
        this.loggedIn();
    }

    loggedIn()
    {
        return tokenNotExpired();
    }
}

AuthenticationCallbackActivateGuard.ts

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Location } from '@angular/common';
@Injectable()
export class AuthenticationCallbackActivateGuard implements CanActivate {
    constructor(private location: Location) { }
    canActivate() {
        // You may want to make a more robust check here
        return this.location.path(true).indexOf("access_token") === -1;
    }
}

我的文件夹结构

文件夹结构

Answer 1

根据我的理解，你不应该引导你的警卫。您实际上将其添加到ngModule中的提供程序中，这样整个应用程序中都可以使用保护和其他提供程序（如服务）。

providers: [AuthenticationCallbackActivateGuard]

.. 如果你这样做，你不需要添加它的任何组件。如果你想在你的登录组件中实现它，你只需将它添加到你的路由模块中，就像你在路由中的主组件中标记它一样

{ path: 'login', component: LoginComponent, canActivate[AuthenticationCallbackActivateGuard] },

至于您的错误，原因很简单您尝试使用错误的名称导入它，在登录组件中，您尝试导入它，如下所示：

import { AuthCallback } from './components/login/authenticationcallbackactivateguard'; //<-- Error is here

即使组件的名称似乎是：AuthenticationCallbackActivateGuard

如果您不想在模块中添加提供程序，

也可以只在每个组件中添加提供程序，但我发现在模块中声明它更好、更容易，因此您无需确保将其导入到需要它的每个组件中:)