如何在具有依赖项的提供程序中注册服务？

Question

I have custom service RequestsMethods in Angular 5:

@Injectable()
export class RequestsMethods {
  constructor(private http: HttpService) {
  }
}

Where HttpService is:

import {Headers, Http, Request, RequestOptions, RequestOptionsArgs, Response, XHRBackend} from '@angular/http';
@Injectable()
export class HttpService extends Http {

constructor(private router: Router, backend: XHRBackend, options: RequestOptions) {
        super(backend, options);
    }
}

My ngModule is:

providers: [
    BrowserXhr,
    XHRBackend,
    RequestsMethods,
    FormRegister
  ],

I get the following error:

ERROR Error: StaticInjectorError(AppModule)[RequestsMethods -> HttpService]: StaticInjectorError(Platform: core)[RequestsMethods -> HttpService]: NullInjectorError: No provider for HttpService! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.ge

From error message I got that I need register HttpService in providers, I tried:

providers: [
    HttpService,
    BrowserXhr,
    XHRBackend,
    RequestsMethods,
    FormRegister
  ], 

Now I have another error:

ERROR Error: StaticInjectorError(AppModule)[XHRBackend -> ResponseOptions]: 
  StaticInjectorError(Platform: core)[XHRBackend -> ResponseOptions]: 
    NullInjectorError: No provider for ResponseOptions!

Now my provider section is:

 providers: [
    {
      provide: RequestsMethods ,
      useFactory: RequestsMethodsFactory,
      deps: [HttpService]
    },
    FormRegister,
    ErrorWatcher,
    {
      provide: HttpService,
      useFactory: httpFactoryService,
      deps: [Router, XHRBackend, RequestOptions]
    }
  ],

My last changes in ngModule file:

export function httpFactoryService(router: Router, backend: XHRBackend, options: RequestOptions) {
  return new HttpService(router, backend, options);
}

function RequestsMethodsFactory(router: Router, backend: XHRBackend, options: RequestOptions) {
  return new RequestsMethods(httpFactoryService(router, backend, options));
}

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

providers: [
    {
      provide: RequestsMethods ,
      useFactory: RequestsMethodsFactory,
      deps: [Router, XHRBackend, RequestOptions]
    },
    FormRegister,
    ErrorWatcher,
    {
      provide: HttpService,
      useFactory: httpFactoryService,
      deps: [Router, XHRBackend, RequestOptions]
    }
  ],

Answer 1

function RequestsMethodsFactory(HttpService) {
    return new RequestsMethods(new HttpService());
}

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule
....
  ],
  providers: [
   {
     provide: RequestsMethods ,
     useFactory: RequestsMethodsFactory,
     deps: [HttpService]
   },
   ....
],
],
  bootstrap: [AppComponent]
})
export class AppModule { }

Read from the documentation: https://angular.io/guide/dependency-injection#factory-providers

Answer 2

Your HttpService injects through the constructor three major tokens. Two of them ( XHRBackend and RequestOptions ) belong in the HttpModule (deprecated as for Angular 4.2 - you should use the types contained in HttpClientModule instead). The other one is Router , which belongs in RouterModule .

In order for your Ngmodule to be aware of the types and tokens required in the cnstructor, you will want to declare both RouterModule and HttpModule in the imports property of your Ngmodule :

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,  // <-- This!
    HttpModule     // <-- And this!
  ],
  providers: [
    HttpService,
    RequestsMethods,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }