Inject Http manually in Angular 2

Question

I have created a Base Model in which I have all the common functions to fetch data and post or put the data. Actually what a service does in Angular but I don't want a service.

Now what I am planning to do is The base model will extended by all the modules in my system each module having its base endpoint to get data from the API. Now here's the problem If I inject the Http service in base model and the user model extends the Base model, Now to create a object of base model I need to pass the object of Http which I am unable.

export class BaseModel {
constructor (http: Http) {}

fetch() {
let params = {
            "includes": this.includes,
            "page": page,
            "filters" : this.filters,
            "order" : this.orderDirection + this.orderColumn
        };

        return this.api.get("/"+this.endpoint, params)
            .map(
                (response: any) => {
                    let total = response.meta.total;
                    let current = response.meta.current;

                    let min = current - 5;
                    let max = current + 5;

                    if (min < 1) {
                        min = 1;
                    }

                    if (max > total) {
                        max = total;
                    }
                    else if (max < 10) {
                        if(total < 10) {
                            max = total;
                        }else {
                            max = 10;
                        }
                    }

                    let pages : number[] = [];

                    for (let i = min; i <= max; i++) {
                        pages.push(i);
                    }

                    this.pages = pages;

                    return response
                }
            );
}
}

Now my User Model

export class User extends BaseModel {

public id : number;
    public username : string;
    public email : string;
    public password : string;
    public passwordConfirmation : string;
    public details : UserDetail = new UserDetail();
    public type : string;
    public status : string;
    public profileImage : string;
    public profileImageUrl : string;
    public crop : Object = {};
    public lastLogin : string;
    public numberOfLogin : string;
    public joinDate : string;
    public registerType : string = "web";

    public static create(response : any) {

        if (response === undefined || response === null) {
            return response;
        }

        let details = new UserDetail();

        if (response.details) {
            details = UserDetail.create(response.details);
        }

        let user = new User(); //error parameter required
        user.id = response.id;
        user.username = response.username;
        user.email = response.email;
        user.status = response.status;
        user.type = response.type;
        user.details.id = response.details.id;
        user.details = details;
        user.profileImageUrl = response.profile_image_url;
        user.joinDate = response.created_at;
        user.registerType = response.register_type;

        return user;
    }

}

score 15 · Accepted Answer · edited May 23 '17 at 11:47

15

UPDATE (final)

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

ORIGINAL (RC.x)

constructor() {
  let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
  this.http = injector.get(Http);
}

This creates a new injector (independent of the one used by the rest of your Angular2 app. This isn't necessarily a problem, you just should be aware of it.

See also angular2 resolveAndCreate HTTP - missing HTTP_PROVIDERS in RC7

edited May 23 '17 at 11:47

Community

1
1

answered Aug 31 '16 at 07:44

Günter Zöchbauer

623,577
216
2,003
1,567

Do you have a RC.5+ implementation of this? HTTP_PROVIDERS no longer exists in these versions. – Lucio Mollinedo Sep 21 '16 at 16:56
You need to list all the providers from `HttpModule`. I posted an answer to a similar question recently (only on the phone now) – Günter Zöchbauer Sep 21 '16 at 19:11
Can you please tell me where `httpFactory` is found(from where to import)? – Xlander Feb 02 '17 at 18:27
3

I'm a lazy guy, you might be too: `import { Http, Response, Headers, RequestOptions, ResponseOptions, BrowserXhr, BaseRequestOptions, BaseResponseOptions, ConnectionBackend, XHRBackend, XSRFStrategy, CookieXSRFStrategy } from '@angular/http';` – kair Apr 12 '17 at 10:25

score 5 · Answer 2 · answered Feb 01 '17 at 14:43

Ugly solution which works in Angular 2.1

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

const providers = (<any>HttpModule).decorators[0].args[0].providers;
const injector = ReflectiveInjector.resolveAndCreate(providers);
const http = injector.get(Http);

Inject Http manually in Angular 2

2 Answers2

Linked