找不到模塊'./components/login/authenticationcallbackactivateguard'

Question

我在嘗試將注入式服務導入組件時遇到問題。嘗試我可能無法讓系統看到AuthenticationCallbackActivateGuard。

我使用的是Steve Sanderson's ASP.Net Core based Angular 2 template的修改版本。它在app.module中導入完全正確，但只要我嘗試在Login組件上拉它，它就再也找不到了。

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; 
    } 
} 

我的文件夾結構

Folder Structure

Answer 1

從我的理解，你不應該引導你的警衛。你實際上是用ngModule將它添加到你的提供者中的，那樣的話，守衛和其他提供者如服務在整個應用程序中都是可用的。

providers: [AuthenticationCallbackActivateGuard] 

..如果你這樣做，你不需要添加任何你的組件。如果你想實現它在您的登錄分量，你只需將其添加到您的路由模塊，你已經在你家成分標註同樣的方式在路由

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

至於你的錯誤，原因很簡單，你嘗試與錯誤的名稱導入，在登錄分量嘗試導入它像：

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

即使組件的名稱似乎是：AuthenticationCallbackActivateGuard

如果您不想在您的模塊中添加提供程序，您可以al所以只需在每個組件中添加提供程序，但是我發現只需在模塊中聲明該提供程序會更好，更輕鬆，因此您無需確保已將其導入每個需要它的組件中。:)