將服務注入服務

Question

我通過Visual Studio模板構建了一個Angular應用程序。

結構如下給出：

• /Clientapp
• ./app/app.module.shared.ts
• ./app/app.module.client.ts
• ./應用程序/ app.module.server.ts
• ./components/*
• ./services/person-data.service.ts
• ./services/auth- http.service.ts
• ./boot-client.ts
• ./boot-server.ts

所以在人-data.service.ts我想使用AUTH-HTTP。 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!

我錯過了什麼？

Answer 1

嘗試，因爲他們是從構造函數中刪除注射裝飾不需要。

那麼，作爲錯誤說，你的模塊的供應商，如內進口則：

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

Answer 2

我想你在app.module.client.ts

app.module.client.ts忘記

進口sharedConfig.providers

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