AnchovyLegend AnchovyLegend - 22 days ago 17
TypeScript Question

Dependency injection causing build to break

I am working on a project in which I need to use Http on the service layer. Below I am trying to inject Http in to the constructor as I normally would, however when trying to do

ionic build ios
I am getting the following errors:

[08:54:51] Error: Error at /Users/zzz/Sites/angular-app/Test-Wondersign/.tmp/pages/home/home.ngfactory.ts:64:29
[08:54:51] Supplied parameters do not match any signature of call target.
[08:54:51] ngc failed
[08:54:51] ionic-app-script task: "build"
[08:54:51] Error: Error


home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomeService } from '../home/home.service';

@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [HomeService]
})
export class HomePage {

users: any;

constructor(public navCtrl: NavController, public hs: HomeService) {
this.loadUsers();

}

loadUsers() {
this.hs.getUsers().then( (response) => {
this.users = JSON.parse(response._body);
});
}
}


home.service.ts

import { Http,Headers, RequestOptions } from '@angular/http';
import {Inject} from '@angular/core';

export class HomeService {
url:string;
constructor(@Inject(Http) public http: Http) {
this.url ='https://jsonplaceholder.typicode.com/users';
}

getUsers(): Promise<any> {
return new Promise((resolve, reject) => {

this.http.get(this.url).subscribe( result => {
resolve(result);
});
});
}
}


home.html

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<div *ngFor="let user of users">
{{ user.name}} {{ user.email}}
</div>
</ion-content>

Answer

Your HomeService must be annotated with @Injectable.