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:

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? — Max Koretskyi
– Max Koretskyi, Commented Jul 20, 2017 at 5:03
Try this solution, it worked for me stackoverflow.com/questions/42461852/inject-a-service-manually — Andres Rincon
– Andres Rincon, Commented Jun 29, 2020 at 0:14

Max Koretskyi · Accepted Answer · 2017-07-24 10:01:47Z

6

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.

edited Jul 24, 2017 at 10:01

answered Jul 20, 2017 at 5:02

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

hholtij Over a year ago

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).

Max Koretskyi Over a year ago

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

Max Koretskyi Over a year ago

@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?

hholtij Over a year ago

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.

hholtij Over a year ago

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

|

angularconsulting.au · Accepted Answer · 2017-07-20 05:04:53Z

5

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.

edited Jul 20, 2017 at 5:04

answered Jul 20, 2017 at 3:39

angularconsulting.au

28.5k14 gold badges91 silver badges105 bronze badges

4 Comments

Max Koretskyi Over a year ago

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

angularconsulting.au Over a year ago

@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 ;)

Max Koretskyi Over a year ago

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

Craig Over a year ago

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

Jens Bodal · Accepted Answer · 2018-04-06 03:04:42Z

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);
});

hholtij · Accepted Answer · 2017-07-20 03:52:59Z

1

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);
});

answered Jul 20, 2017 at 3:52

hholtij

2,9466 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Inject Http manually in Angular 4

4 Answers 4

17 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

17 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related