Angular 2：未处理的承诺拒绝：没有 AuthService 的提供者！ ;区域：角度

Posted 2023-03-13

【中文标题】Angular 2：未处理的承诺拒绝：没有 AuthService 的提供者！ ;区域：角度

【英文标题】：Angular 2: Unhandled Promise rejection: No provider for AuthService! ; Zone: angular

【发布时间】：2018-02-28 14:08:56

【问题描述】：

我使用 AuthService 和 AuthGuard 来登录/注销用户并保护路由。 AuthService 用于 AuthGuard 以及 LoginComponent。 AuthGuard 用于通过 CanActivate 保护路由。当我尝试运行应用程序时，出现以下错误：

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 文件并添加到提供程序数组中，因此它可以用作单例服务。

编辑添加代码示例：

我的应用模块包含以下内容：

@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
    ) 

授权服务：

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');
    

    ...

【问题讨论】：

请提供代码。具有构造函数的服务类以及您提供和注入它们的位置和方式。

AuthService 应该使用 providers 数组在 AppModule 中提供，而不是导入。

@Mihailo 抱歉，这是我的错字，意思是提供者数组。它不在导入数组中。我将编辑问题

@natmegs 您在实施 AuthGuard 之前是否遇到过这个问题？

@GunterZochbauer 我已经编辑了问题以添加一些代码示例

【参考方案1】：

在您的 app.component 类 @Component() 装饰中添加一行声明：

providers: [AuthService]

这会在该级别为该服务创建一个单例服务。如果您想在更细粒度的级别提供它，您可以在较低级别提供（实例化）它。

请参阅此官方 angular 2 documentation 中的前几段

【讨论】：

我试过了，但问题仍然存在。我认为注入 NgModule 的 providers 数组会在模块中的所有组件中创建一个可用的单例服务？

【参考方案2】：

原来我没有在 AuthGuard 中正确地大写我的 AuthService 导入.....

import  AuthService  from './authservice';

应该是

import  AuthService  from './AuthService';

自我注意：导入区分大小写