Add Http manually in angular 2

Question

I created a basic model in which I have all the common functions for retrieving data and publishing or posting data. In fact, what the service does in angular, but I don't need the service. Not what I plan to do. The base model will be expanded by all modules in my system, each module has its own base endpoint for receiving data from the API. Now here is the problem. If I introduce the Http service into the base model and the user model extends the base model, now to create the base model object I need to pass the Http object, which I cannot.

Please let me know if you need additional support to answer this question.

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

Answer 1

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 (regardless of which is used by the rest of your Angular2 application. This is not necessarily a problem, you just need to know about it.

See also angular2 resolveAndCreate HTTP - missing HTTP_PROVIDERS in RC7

Answer 2

An ugly solution that 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);