I am trying to create an ionic2 application that gets data using http requests. I started of with ExampleProject with the command ionic start ExampleProject blank --v2 --ts.
I added a service using the command. ionic g provider QuerySEService. Once done, I imported the service in my app.ts and home.ts files. When I try to add the service as parameter to my home.ts file, I get a blank screen in windows & android .
If I don’t use service in the constructor parameter the works fine. This is just template app. It does not do anything with the service.
I am unable to understand why the app does not inject the service into home.ts constructor. Please find the code below. I executed the code using Visual studio 2015 as well through the command
ionic emulate windows
app.ts;
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import { HTTP_PROVIDERS } from '@angular/http';
import {HomePage} from './pages/home/home';
import {QuerySeService} from './providers/query-se-service/query-se-service';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [QuerySeService],
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
home.ts:
import {Page, NavController, NavParams} from 'ionic-angular';
import { QuerySeService } from '../../providers/query-se-service/query-se-service';
import {OnInit} from '@angular/core';
@Page( {
templateUrl: 'build/pages/home/home.html'
})
// @Injectable()
export class HomePage {
constructor( private service: QuerySeService ) {
}
//ngOnInit() {
//}
}
query-se-service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
/*
Generated class for the QuerySeService provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class QuerySeService {
constructor( private http: Http ) { }
}
The code hierarchy is in the attachment.
