角度2：未處理的承諾拒絕：沒有AuthService的提供者！ ;區域：角度

我使用AuthService和AuthGuard登錄/註銷用戶和防護路由。 AuthService用於AuthGuard以及LoginComponent中。 AuthGuard用於通過CanActivate保護路線。當我嘗試運行應用程序，我得到以下錯誤：角度2：未處理的承諾拒絕：沒有AuthService的提供者！ ;區域：角度

zone.js:522 Unhandled Promise rejection: No provider for AuthService! ; Zone: angular ; Task: Promise.then ; Value: NoProviderError {__zone_symbol__error: Error: DI Error 
    at NoProviderError.ZoneAwareError

我已經檢查了LoginComponent和AuthGuard都導入AuthService並將它注入到通過構造的組件。我也檢查過，AuthService被導入到AppModule文件中並添加到providers數組中，因此它可以用作單例服務。

編輯以添加代碼示例：

我的應用模塊包含以下內容：

@NgModule({ 
    imports: [...], 
    providers: [..., AuthService, AuthGuard, ...], 
    declarations: [..., LoginComponent, EntryComponent ...], 
    bootstrap: [EntryComponent] 
}) 
export class AppModule { 
}

AuthGuard：

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

import { AuthService } from './authservice'; 

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 

     console.log(this.isAuthenticated()); 

     if (this.isAuthenticated()) { 
      if (this.config.defined) { 
       return true; 
      } else { 
       this.authService.setConfig(); 
       return true; 
      } 
     } else { 
      this.router.navigate(['/Login']); 
      return false; 
     } 
    } 

    // Checks if user is logged in 
    isAuthenticated() { 
     return this.authService.userLoggedIn(); 
    } 
}

LoginComponent構造：

constructor(
     private router: Router, 
     private notifications: Notifications, 
     private authService: AuthService 
    ) {}

AuthService：

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { ApiConfig } from '../Api'; 

@Injectable() 
export class AuthService { 
    constructor(
     private http: Http, 
     private router: Router, 
     private config: ApiConfig 
    ) { 
     this.apiRoot = localStorage.getItem('apiRoot'); 
    } 

    ... 
}

來源

2017-09-19 natmegs

請提供代碼。具有構造函數的服務類以及您在何處以及如何提供並注入它們。 –

**應使用** providers **數組在** AppModule **中提供AuthService **，而不是導入。 – Mihailo

@Mihailo對不起，這是我的錯誤，意味着提供商數組。它不在進口數組中。我將編輯問題 – natmegs

原來我沒有正確把握我AuthService進口在AuthGuard .....

import { AuthService } from './authservice';

應該已經

import { AuthService } from './AuthService';

自我注意：進口區分大小寫

來源

2017-09-19 19:18:13 natmegs

在你app.component類@Component（{}）裝飾添加狀態線路：

providers: [AuthService]

這在該級別爲該服務創建一個單獨的服務。如果你想以更細粒度的級別提供它，你可以在較低級別提供（實例化）它。

請參閱第幾段在這個官方角2 documentation

來源

2017-09-19 18:05:53 Nick

我試過這個，但問題依然存在。我認爲注入到NgModule的提供者數組中會創建一個在模塊中所有組件中可用的單例服務？ – natmegs

角度2：未處理的承諾拒絕：沒有AuthService的提供者！ ;區域：角度

回答

相關問題