角型HttpInterceptorからのサービスの使用

Question

私は、自動ビジーロードインジケータを持つためにHttpInterceptorからシングルトンサービスを使用しようとしています。

ただし、インターセプタはサービスなしで動作しますが、サービスは使用しないという問題があります。サービスとHttpInterceptorは次のように提供されているアプリモジュールで

constructor(private htbs: HttpBusyService) {} 

：

providers: [ 
    HttpBusyService, 
    { provide: LocationStrategy, useClass: HashLocationStrategy}, 
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, 
    MessageService, 
    ConfirmationService, 
] 

私はエラーHttpInterceptorのコンストラクタで次のように

私はサービスを参照しています取得方法は次のとおりです。

Uncaught Error: Can't resolve all parameters for AuthInterceptor: (?). 
    at syntaxError (compiler.js:485) 
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15664) 
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15499) 
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15479) 
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15839) 
    at eval (compiler.js:15750) 
    at Array.forEach (<anonymous>) 
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15710) 
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15278) 
    at JitCompiler._loadModules (compiler.js:34226) 

私はどこを探すべきか分かりません。私はシングルトンを使用する他のインターセプタを見たので、明らかに何か間違っています。 私は角5.1.0-rc.1を使用していますが、5.0.0は、すべてのヘルプははるかに

月、私はAngular HTTP Interceptor that uses a Serviceを見てきました

PS1

を高く評価している

同じ問題

を持っていましたか？インターセプタ

import { Injectable } from '@angular/core'; 
import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent,  HttpEventType, HttpErrorResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import { HttpBusyService } from './http-busy.service'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 

export class AuthInterceptor implements HttpInterceptor { 

    constructor(private htbs: HttpBusyService) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<HttpEventType.Response>> { 
    // this.htbs.start(); 
const authReq = req.clone({ 
    setHeaders: { 'X-AUTH-TOKEN': sessionStorage.getItem('token') } 
}); 
return next 
.handle(authReq) 
.do((ev: HttpEvent<any>) => { 
    if (ev instanceof HttpResponse) { 
    console.log('processing response', ev); 
    } 
}) 
.catch(response => { 
    // if (response instanceof HttpErrorResponse) { 
    console.log('Processing http error', response); 
    // } 

    return Observable.throw(response); 
}); 
    } 
} 

と忙しいサービス：：

import { Injectable } from '@angular/core'; 

@Injectable() 
export class HttpBusyService { 
    public busy = false; 
    private count = 0; 
    constructor() { } 
    public start() { 
    this.count++; 
    this.busy = true; 
    } 
    public finish() { 
    this.count--; 
    if (this.count <= 0) { 
     this.count = 0; 
     this.busy = false; 
    } 
    } 
} 

Answer 1

あなたはAuthInterceptorを示すために@Injectable() Decoratorを使用して忘れてしまったが、答えは、私はプロバイダに

EDITを再配置しようとした
PS2を助けていません注射可能な要素である。

Angular Dependency Injectionはこのように動作します。 @Injectableを使用して「注入可能な」コンポーネントを定義し、プロバイダ@Componentに登録する必要があります。理解を深めるためにはthisとお読みください。

最後に、私の愚見では、時々、角度およびそれに関連するコールスタックでエラーが理解し少しトリッキーであり、彼らは、あなたの迎撃やサービスの完全な実装コードを入力してください