Blank screen when trying to inject a service


#1

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.


#2

I see you have commented out @Injectable() on HomePage. I’m not sure whether Ionic adds it for you as part of the Page directive, but on an ordinary Angular2 Component you would need it. Does enabling it change anything?


#3

Just tried uncommenting @Injectable(). Still does not work.


#4

@jagansai Judging by your imports you’re using the Angular 2 RC release which is still not supported by Ionic 2. There are several breaking changes between the Angular 2 release currently used in Ionic 2 beta.6 release (Angular 2.0.0-beta.15) and the Angular 2.0.0-rc1. Check out the linked topic for details:

Here’s the issue that tracks the progress of the remaining work of the upgrade to Angular 2 RC:

I would suggest you to wait for beta.7 if you want to use Angular 2 RC or use the currently supported version of Angular 2 - 2.0.0-beta.15.


#5

Ah! Thanks. Will wait for the beta 7 release.