How to inject HttpClient in static method or custom class?

Question

I'd like to use angular HttpClient in static method or class (in class it can't be defined as constructor parameter).

I tried something like:

export class SomeNotInjectableService {
  static doSomething() {
    const injector = Injector.create({
      providers: [{provide: HttpClient, deps:[]}]
    });
    const httpClient: HttpClient = injector.get(HttpClient);

    httpClient.request(...); // error Cannot read property 'handle' of undefined
  }
}

this is a try of injecting manually the client in static service method. Doesn't work. I'm curious how to do this or how to inject the client in normal method but in a class which isn't a component.

Answer 1

You can also skip the injector if you don't have one. That means doing the 'injecting' yourself. I don't recommend doing this. If you really want to use a static method (in favor of a proper service), pass all the needed stuff.

I'm not sure if this isn't already obvious but any HTTP interceptor will be missing from this httpClient pipeline, since there's no way of resolving them.

import { HttpClient, HttpXhrBackend } from '@angular/common/http';

const httpClient = new HttpClient(new HttpXhrBackend({ build: () => new XMLHttpRequest() }));
httpClient.get('test').subscribe(r => console.log(r));

or using your own created injector (if you don't like passing ctor args):

const injector = Injector.create({
    providers: [
        { provide: HttpClient, deps: [HttpHandler] },
        { provide: HttpHandler, useValue: new HttpXhrBackend({ build: () => new XMLHttpRequest }) },
    ],
});
const httpClient: HttpClient = injector.get(HttpClient);
httpClient.get('test').subscribe(r => console.log(r));

Answer 2

I'm not exactly sure why it does not work the way you tried (probably something missing when you create the injector), but it works if you use an 'injected' injector

If you look at the source code throwing the error you see that it mentions handlers for the request, which seems to be null in your example. Maybe angular registers some internal handlers when the HttpClient is provided the 'traditional' way, but not the way you do it

// Start with an Observable.of() the initial request, and run the handler (which
// includes all interceptors) inside a concatMap(). This way, the handler runs
// inside an Observable chain, which causes interceptors to be re-run on every
// subscription (this also makes retries re-run the handler, including interceptors).

var /** @type {?} */ events$ = rxjs_operator_concatMap.concatMap.call(rxjs_observable_of.of(req), function (req) { return _this.handler.handle(req); });

Work around:

app.module.ts

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

export let InjectorInstance: Injector;

export class AppModule 
{
  constructor(private injector: Injector) 
  {
    InjectorInstance = this.injector;
  }
}

Your static class/method

import {InjectorInstance} from './app.module';

export class SomeNotInjectableService {
  static doSomething() 
  {
  /*  const injector = Injector.create({
      providers: [{provide: HttpClient, deps:[]}]
    });
    const httpClient: HttpClient = injector.get(HttpClient);
*/
    const httpClient =  InjectorInstance.get<HttpClient>(HttpClient);

    httpClient.request(...)...
  }
}

Example on Stackblitz: https://stackblitz.com/edit/angular-li8b37?file=app%2Fapp.component.ts