Angular2 - 將服務注入服務時無效的提供程序錯誤

我目前有一個模塊設置，如下所示（exerpt）;Angular2 - 將服務注入服務時無效的提供程序錯誤

AppModule 

    RoutingModule 
    AuthRouteGuard 

    AuthModule 
    LoginFormComponent 
    AuthService

我已經定義我的AuthService（負責處理用戶認證和提供一種方法，用於確定當前用戶是否被認證），爲提供者在我AuthModule;

// auth.module.ts - uses https://github.com/auth0/angular2-jwt 

export function authHttpServiceFactory(http: Http, options: RequestOptions) { 
    return new AuthHttp(new AuthConfig({ 
    tokenName: jwtLocalStorageKey 
    }), http, options); 
} 

export let authHttpServiceProvider = { 
    provide: AuthHttp, 
    useFactory: authHttpServiceFactory, 
    deps: [Http, RequestOptions] 
}; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule 
    ], 
    exports: [AuthComponent], 
    declarations: [AuthComponent, LoginComponent, RegisterComponent], 
    providers: [ 
    AuthService, 
    authHttpServiceProvider 
    ] 
}) 
export class AuthModule { }

我可以使用這項服務與其兄弟LoginFormComponent內沒問題。當我嘗試在RoutingModule的AuthRouteGuard類中嘗試使用AuthService但是，我收到以下錯誤;

Error: Invalid provider for the NgModule 'AuthModule' - only instances of Provider and Type are allowed, got: [?undefined?, ...]

我有AuthModule的RoutingModule內進口。一旦將AuthService定義爲AuthRouteGuard的依賴關係，就會發生上述錯誤;

export class AuthRouteGuard implements CanActivate { 
    constructor(
    private router: Router, 
    private authService: AuthService // Removing this injection removes the error 
) {} 

    canActivate() { 
    // @todo: if not authenticated 
    this.router.navigate(['/login']); 

    return true; 
    } 
}

缺少什麼我在這裏，爲什麼會注入構造函數中的服務原因當注射去除不發生非法提供程序錯誤？如果authHttpServiceProvider提供商完全刪除，所以AuthModule模塊看起來像發生同樣的錯誤 -

編輯;

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule 
    ], 
    exports: [AuthComponent], 
    declarations: [AuthComponent, LoginComponent, RegisterComponent], 
    providers: [ 
    AuthService 
    ] 
}) 
export class AuthModule { }

來源

2017-03-19 James Crinkley

'AuthModule'是延遲加載模塊？ –

否@BougarfaouiElhoucine，只是一個常規模塊 –

添加authHttpServiceProvider來導入模塊。它被導出到全局並且不可用於模塊。所以你不能提供服務，因爲你有模塊的未知提供者。

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule 
    ], 
    exports: [AuthComponent], 
    declarations: [AuthComponent, LoginComponent, RegisterComponent], 
    providers: [ 
    AuthService 
    ] 
}) 
export class AuthModule {

來源

2017-03-19 13:26:50

導入到'AuthModule'？這不是真的，因爲如果我刪除'RoutingModule'中的用法，它可以在'AuthModule'的'LoginFormComponent'中正常工作。 –

'RoutingModule'如何知道提供者？如果您刪除該模塊，則會刪除錯誤的提供商。這是一個解決方案。 –

如果我刪除與auth提供者相關的所有內容（所以'AuthModule'中的唯一提供者就是'AuthService'，同樣的錯誤也會發生，所以它與這個沒有關係。 –

實際問題出在AuthService本身。

AuthModule定義了一個常數;

export const jwtKey = 'jwt';

哪個被導入到AuthService中並被使用;

import { jwtKey } from '../auth.module';

由於某種原因，如果我刪除此導入一切工作正常。

來源

2017-03-19 14:30:17

Angular2 - 將服務注入服務時無效的提供程序錯誤

回答

相關問題