Inject service in provider Angular 5?

Question

I have simple custom service in Angular 5:

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

}

I tried to register this as provider in @NgModule({}):

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

Then in component I used:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [RequestsMethods]

});

And component constructor:

constructor(private requestMethods: RequestsMethods){}

After compiling it gives me an error:

Error: StaticInjectorError(AppModule)[HttpService -> XHRBackend]:
StaticInjectorError(Platform: core)[HttpService -> XHRBackend]: NullInjectorError: No provider for XHRBackend! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1060) at resolveToken (core.js:1298) at tryResolveToken (core.js:1242) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139) at resolveToken (core.js:1298) at tryResolveToken (core.js:1242) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139) at resolveNgModuleDep (core.js:8374) at _callFactory (core.js:8442) at _createProviderInstance (core.js:8394)

If delete constructor from RequestsMethods and register RequestsMethods in providers it works fine

Seems `RequestsMethods` has `constructor(private http: HttpService) {}` it means I need pass httpService inside where I register this `RequestsMethods` — POV, Aug 28 '18 at 22:34
This is custom HTTP class that extends native HTTP: `@Injectable() export class HttpService extends Http {}` — POV, Aug 28 '18 at 22:39
does this help? https://stackoverflow.com/questions/44700451/no-provider-for-xhrbackend-with-angular-2-and-http-service — Haifeng Zhang, Aug 28 '18 at 22:42
Yes, `import {HttpClient, HttpClientModule} from '@angular/common/http';` — POV, Aug 28 '18 at 23:10
If delete from providers: `providers: [ RequestsMethods]` project works fine, something with that — POV, Aug 28 '18 at 23:16
When I inject in constructor I do: constructor( public requestMethods: RequestsMethods). But ` RequestsMethods` accepts HTTP in constructor therefore I get error — POV, Aug 28 '18 at 23:22
I think I need something this: `{ provide: RequestsMethods, useClass: Http }` — POV, Aug 28 '18 at 23:24

score 1 · Accepted Answer · answered Aug 29 '18 at 03:35

1) In your app.module.ts,

-- import and register RequestsMethods under providers.
-- import and register BrowserModule and HttpClientModule under imports.

@NgModule({
 imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  providers: [RequestsMethods],
})

2) Import and inject the RequestMethods service into your desired component.

constructor(private requestMethods: RequestsMethods){}

For your use case, do not 'provide' the RequestMethods service at the component level.

i.e.:

In your component, the following line is enough

constructor(private requestMethods: RequestsMethods){}

Remove this -> providers: [RequestsMethods] in your @Component annotation

Explanation:

Provider lets the dependency injection system to know "how to obtain a value for a dependency".

When you add a service provider to the app.module.ts (root module), it is available throughout the app.

You should always try to provide your desired service in the root module unless if you want the service to be available only if a particular @NgModule is imported.

It does not work, I get message: `ERROR Error: StaticInjectorError(AppModule)[RequestsMethods -> Http]: ` because my service accepts Http — POV, Aug 29 '18 at 20:03
You can import HttpClient and provide it in your custom HTTP service's constructor. In addition to the steps discussed above, 1) Import that custom Httpservice in your appmodule 2) provide it under providers in app module 3) inject it into the constructor of RequestsMethods. This should work. Don't include your custom httpservice as provider anywhere else. If your appmodule can discover your custom HTTP service, that static injection error will be gone for good. — Naseem Ahamed, Aug 31 '18 at 03:04

Inject service in provider Angular 5?

1 Answers1