Angular 2 - Insert Http into a class (model)

Question

I'd like to have a model that updates the back-end by itself but when I import Http it is undefined.

    import {Http, Headers} from "@angular/http";

        export class Vehicle {
          engine:string
          id:number

          constructor(private http:Http){
          }

          update() {            
            const body = JSON.stringify(engine);
            const headers = new Headers();
            headers.append('Content-Type', 'application/json');
            return this._http.put('http://localhost/v1/vehicles/' + id, body, {headers: headers})
                .map(response => response.json());
          }

        }

The idea then is to do something like:

var vehicle = new Vehicle();
vehicle.update(); //this then would update the back end

I've simplified the class to show what I'm after (not worried about the syntactical correctness necessarily in the above example).

In this scenario, it transpiles correctly and there are no errors BUT http is undefined.

I can achieve what I want in an ng2 service by getting the contents of the vehicle instance and then passing them onto the VehicleList service but was wondering if it's possible to do it right in the Vehicle class itself.

Maximilian Riegler · Accepted Answer · 2016-06-14T14:15:21.577

4

This is because you create the instance of the Vehicle yourself and therefore Angular can't resolve the Http class for you. A possible solution would be to inject Http yourself - in the constructor or in the update() method itself.

class Component1 {
    constructor(private _http: Http) { }

    [...]

    var vehicle = new Vehicle(this._http);
    vehicle.update();
}

Update: You can however resolve it yourself in the Vehicle class with the ReflectiveInjector like this:

import {HTTP_PROVIDERS, Http, Headers} from "@angular/http";
import {ReflectiveInjector} from '@angular/core';

export class Vehicle {
  engine:string;
  id:number;

  constructor(private _http: Http){
    var injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
    this._http = injector.get(Http);
  }

  update() {            
    const body = JSON.stringify(engine);
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this._http.put('http://localhost/v1/vehicles/' + id, body, {headers: headers})
      .map(response => response.json());
  }
}

Plunker for reference

edited Jun 14 '16 at 14:15

answered Jun 14 '16 at 13:04

Maximilian Riegler

22,720
4
62
71

is there a way for the Vehicle class to create an instance of the Http class without having to inject the Http class when creating a vehicle instance? – Nik Jun 14 '16 at 13:18
Why do you not want to inject `Http`? – Günter Zöchbauer Jun 14 '16 at 14:15
Because he wants to use it in his model. We had a similar question already today or yesterday. Using the `Injector` seems really hacky to me, though. :S – Maximilian Riegler Jun 14 '16 at 14:24
1

@rinukkusu that works great! I'm with you that it seems a little hacky but I'm not married to it just yet. Really just want to explore the different ways of encapsulating the required services/classes – Nik Jun 14 '16 at 14:57
HTTP_PROVIDERS was removed before the 2.0 release. How to do this now? – Erik van Velzen Feb 01 '17 at 13:56
Maybe this helps: http://stackoverflow.com/questions/38903798/angular2-rc-5-how-to-inject-http-providers-now-that-http-is-module – Maximilian Riegler Feb 01 '17 at 14:00

Angular 2 - Insert Http into a class (model)

1 Answers1

Linked