サービスにサービスを注入

Question

私はVisual Studioテンプレートを使ってAngular Applicationを構築しました。構造続い

が与えられます。

• /Clientapp
を
• ./app/app.module.shared.ts
• ./app/app.module.client.ts
• ./アプリ/
• ./components/*
• app.module.server.ts
• ./services/auth-を./services/person-data.service.ts http.service.ts
• は
• ./boot-server.tsだから私はAUTH-HTTPを使用したい人data.service.tsで

を./boot-client.ts。 service.ts。

人-data.service.ts

import { Person } from '../models/person' 
import { Configuration } from '../constants/global.constants'; 
import { Injectable, Inject } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import { AuthHttpService } from '../services/auth-http.service'; 

@Injectable() 
export class PersonService { 
    constructor(private http: Http, @Inject(AuthHttpService)private authHttp: AuthHttpService) { 

     this.actionUrl = Configuration.API_SERVER + 'api/person/'; 

     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('Accept', 'application/json'); 
    } 

    public GetAll =(): Observable<Person[]> => { 
     return this.authHttp.get(this.actionUrl).map((response: Response) => <Person[]>response.json()); 
    } 
} 

のauth-http.service.ts

import { Injectable, Inject } from '@angular/core'; 
import { Http, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthHttpService { 
    constructor(private http: Http, @Inject(AuthService) private authService: AuthService) { 

    } 
    get(url: string, options?: RequestOptions): Observable<Response> { 
     console.log("AuthHttpService Get:" + url); 
     if (options) { 
      options = this.authService._setRequestOptions(options); 
     } else { 
      options = this.authService._setRequestOptions(); 
     } 
     return this.http.get(url, options); 
    } 
} 

app.module.shared.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { PersonService } from './services/person-data.service' 
import { Configuration } from './constants/global.constants' 
import { AuthService } from './services/auth.service' 
import { AuthHttpService } from './services/auth-http.service' 
import { AppComponent } from './components/app/app.component' 

export const sharedConfig: NgModule = { 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ 
     AuthHttpService, 
     Configuration, 
     PersonService, 
     AuthService 
    ], 
    imports: [ 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}; 

app.module.client.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { sharedConfig } from './app.module.shared'; 


@NgModule({ 
    bootstrap: sharedConfig.bootstrap, 
    declarations: sharedConfig.declarations, 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     BrowserAnimationsModule, 
     ...sharedConfig.imports 
    ], 
    providers: [ 
     { provide: 'ORIGIN_URL', useValue: location.origin } 
    ] 
}) 
export class AppModule { 
} 

私は、私は次のエラーを取得するアプリケーションを実行します。

An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Error: No provider for AuthHttpService!

何が欠けていますか？私はあなたが

輸入sharedConfig.providers

app.module.client.tsでapp.module.client.ts

... 
providers: [ 
     ...sharedConfig.providers, 
     { provide: 'ORIGIN_URL', useValue: location.origin } 
    ] 
... 

Answer 1

に忘れてしまったと思います

Answer 2

は、彼らがそうであるように、コンストラクタから注入デコレータを削除するようにしてください必要ありません。エラーが言うように

次に、あなたのようなモジュールのプロバイダの内部その後、輸入、：

providers: [ 
      AuthHttpService, 
      // Other services here, 
      { provide: 'ORIGIN_URL', useValue: location.origin } 
      ]