Inject Http manually in Angular 4

Question

I want to manually bootstrap an Angular 4 app (created with CLI). In main.ts I am doing this:

const injector = ReflectiveInjector.resolveAndCreate([
  Http,
  BrowserXhr,
  {provide: RequestOptions, useClass: BaseRequestOptions},
  {provide: ResponseOptions, useClass: BaseResponseOptions},
  {provide: ConnectionBackend, useClass: XHRBackend},
  {provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},
]);
const http = injector.get(Http);

http.get('assets/configs/configuration.json')
  .map((res: Response) => {
    return res.json();
  }).subscribe((config: Configuration) => {
  configuration = config;
  console.log(JSON.stringify(configuration));
  platformBrowserDynamic().bootstrapModule(AppModule);
});

I seem to get a valid Http instance but when I use it (http.get) I get this error:

Uncaught TypeError: Cannot read property 'getCookie' of null
    at CookieXSRFStrategy.webpackJsonp.../../../http/@angular/http.es5.js.CookieXSRFStrategy.configureRequest (vendor.bundle.js:141626)

My http object looks like this:

Ancell

You can do that with http provided by Angular. See my answer. I'm also curios where you use ConfigurationService, can you elaborate on that? – Etherize

Try this solution, it worked for me https://mcmap.net/q/360605/-inject-a-service-manually – Lanell

Answer 1

You can use HttpClient service before the Angular starts using ReflectiveInjector like this:

import { ReflectiveInjector } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
const injector = ReflectiveInjector.resolveAndCreate(getAnnotations(HttpClientModule)[0].providers);

const http = injector.get(HttpClient);
http.get('/posts/1').subscribe((r) => {
  ConfigurationService.configuration = <Configuration>JSON.parse(config);
  platformBrowserDynamic().bootstrapModule(AppModule);
});

This line:

getAnnotations(HttpClientModule).providers

references all providers that are registered on the HttpClientModule so you don't have to specify them manually. This answer explains the getAnnotations function in great details.

The approach I've shown is "sort of" the similar to what you're doing when importing HttpClientModule into the AppModule:

@NgModule({
    imports: [HttpClientModule, ...],
})
export class AppModule {}

See this plunker for details.

Etherize

Thanks, Maximus. This looks like the kind of code that might change with the next version. I think I'll stick with my solution for now. However, your submission answers my question and I'll mark it as accepted (although I haven't tried it). – Ancell

you're welcome, you can accept or upvote my answer if it helped. Also can you show how you use ConfigurationService – Etherize

@hholtij, thanks. There are only two pieces here that might be affected by the update httpFactory and _createDefaultCookieXSRFStrategy functions. It's theoretically possible to try to find a way to not use them, at least _createDefaultCookieXSRFStrategy. Everything else is publicly supported and if it changes then you'll have to update all code that uses http inside the Angular app as well. Also I'm still interested in ConfigurationService. Do you then use it as a provider somewhere? – Etherize

ConfigurationService used to be the service that read the config file. We are now using the NSwagStudio tool to auto-generate api services from the swagger definitions. It works very well but necessitates reading the config file before bootstrapping the app as it contains the api urls. Now, ConfigurationService is basically just a class with a static property. Might change that as well. – Ancell

I just tried your solution, Maximus. It doesn't work for me. I get the same error: Uncaught TypeError: Cannot read property 'getCookie' of null at CookieXSRFStrategy.webpackJsonp.../../../http/@angular/http.es5.js.CookieXSRFStrategy.configureRequest – Ancell

@hholtij, yeah, the previous http implementation depended on the some DOM related stuff which wasn't available before the Angular starts. The new HttpClient available in the 4.3.0 seems to not have that dependency and works fine for me. Just tested it and updated the answer. Check it – Etherize

I am using the latest 4.3.1 and there is no 'decorators' property on HttpClientModule. Your code does not work with 4.3.1. – Ancell

this plunker shows that everything is working fine on 4.3.1 – Etherize

@AngularInDepth.com ReflectiveInjector is being deprecated. How would you do this with StaticInjector? – Havard

@c1moore, same way new StaticInjector(getAnnotations(HttpClientModule)[0].providers) – Etherize

@AngularInDepth.com I tried that with Injector.create(), which is what I think you meant by new StaticInjector, but it doesn't work (Error: StaticInjectorError[HttpClient]: Function/Class not supported). I can't find anything about StaticInjector in the actual documentation. – Havard

@c1moore, why are you trying this? – Etherize

@AngularInDepth.com This might be a conversation better suited for chat. – Havard

@c1moore, I don't have time now, maybe post a new question – Etherize

The answer was actually quite simple. There really was no need to use HttpClient at all. I eventually just created a wrapper around it since all async operations are caught by Angular (via Zones). – Havard

@AngularInDepth.com I am using the same code with static injector it is saying StaticInjectorError[HttpClient]: Function/Class not supported same as @Havard ? and @Havard did you figure that stuff out ? – Bambino

@Bambino Yes, I just used XMLHttpRequest directly. Angular Zones will catch the async request and everything will work automagically. I did create a simple wrapper around XMLHttpRequest, though, that implements the same interface as HttpClient. Let me know if that makes sense. – Havard

Answer 2

As another approach you can use the native browser fetch api. So you do not have to deal with angular http, etc

That is how I am doing that:

fetch(configUrl, { method: 'get' })
.then((response) => {
  response.json()
    .then((data: any) => {
      if (environment.production) {
        enableProdMode();
      };
      platformBrowserDynamic([{ provide: AppSettings, useValue: new AppSettings(data.config) }]).bootstrapModule(AppModule);
    });
});

But bare in mind that fetch didn't get much love in old browsers so you need to polyfil that with whatwg-fetch like npm install whatwg-fetch --save then import 'whatwg-fetch' in polyfills.ts in order if you want to support old browsers.

UPDATE: Yeah you can use XMLHttpRequest but you are getting same browsers support with that as fetch just a modern replacement for XMLHttpRequest.

Lubet

but he's creating them with Injector, he doesn't depend on the framework to provide them – Etherize

@Maximus ahh, I wasn't aware of that, thanks for letting know, but can see at least one downside - it is like 3 times more code ;) – Lubet

Yeah, sure, because http provided by Angular does a lot more than fetch :) – Etherize

it should also be noted that this approach is more future-safe I think – Overleap

Answer 3

Possibly the original answer worked before, but in Angular 5 I was not able to use it, there was no definition for the function getAnnotations. This is what did work for me however:

import { ReflectiveInjector } from '@angular/core';
import {
  HttpClient,
  XhrFactory,
  HttpHandler,
  HttpXhrBackend,
  HttpBackend
} from '@angular/common/http';

// https://github.com/angular/angular/blob/master/packages/common/http/src/xhr.ts#L45
export class BrowserXhr implements XhrFactory {
  build(): any { return <any>(new XMLHttpRequest()); }
}

const injector = ReflectiveInjector.resolveAndCreate([
  HttpClient,
  HttpXhrBackend,
  { provide: HttpBackend, useExisting: HttpXhrBackend },
  { provide: HttpHandler, useExisting: HttpBackend },
  { provide: XhrFactory, useClass: BrowserXhr},
]);

const http: HttpClient = injector.get(HttpClient);

http.get('/url').subscribe((response) => {
  console.log(response);
});

Qualified

Answer 4

Thanks, Kuncevic. I have come up with this solution, which works fine:

function httpGetAsync(theUrl, callback) {
  const xmlHttp = new XMLHttpRequest();

  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
      callback(xmlHttp.responseText);
    }
  }

  xmlHttp.open('GET', theUrl, true); // true for asynchronous
  xmlHttp.send(null);
}

httpGetAsync('assets/configs/configuration.json', (config: string) => {
  ConfigurationService.configuration = <Configuration>JSON.parse(config);
  platformBrowserDynamic().bootstrapModule(AppModule);
});

Ancell