尝试编译和运行ionic2时出现空白屏幕

Question

I am trying to create a simple HTTP post service for my login page.

For some weird reasons, i encountered errors in my app.bundle.js:

TypeError: Cannot read property 'toString' of undefined

Uncaught TypeError: Cannot read property 'getOptional' of undefined

Using ionic2 tutorial sample project, I have done the following:

In my app.js (so my service would be accessible globally)

import {HttpService} from './services/httpService';
@App({
  templateUrl: 'build/app.html',
  config: {} ,// http://ionicframework.com/docs/v2/api/config/Config/
  providers: [HttpService]
})

and set the rootPage to my login page

this.rootPage = LoginPage;

In my log-in.html

 <button  class="button button-block" (click)="loginSuccess()" style="width:70%;">
   <strong>Log In</strong>
 </button>

In my log-in.js

import {App, Page, Platform, IonicApp, NavParams, NavController} from 'ionic-angular';
import {HttpService} from '../../services/httpService';

@Page({
  templateUrl: 'build/pages/log-in/log-in.html'
})

export class LoginPage {

  constructor(nav,app,httpService) {
    this.nav = nav;
    this.app = app;
    this.httpService = httpService;
  }

  loginSuccess() {
    console.log("Invoked Method!");

       this.httpService.loginService(event.target.value).subscribe(
         data => {this.httpService = data.results; console.log(data);},
         err => this.logError(err),
         () => console.log('Invoked Login Service Complete')
       );
  }
}

httpService.JS

import { Inject } from 'angular2/core';
import { Http } from 'angular2/http';
import 'rxjs/add/operator/map';

export class httpService {
    static get parameters() {
        return [[Http]];
    }

    constructor(http) {
        this.http = http
    }

    loginService(httpService) {
      console.log("Service Function Variable: "+httpService);

    //  var body = "username=" + username + "&password=" + password+" &ipAddress="+ip;
      var body = "username=" + "admin" + "&password=" + "admin" +" &ipAddress="+"127.0.0.1";
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');

      var url = 'http://localhost/WS/Login.asmx/Login';
      return this.http.post(url,body, {headers: headers}).map(res => res.json());

    }

}

As you can see, I'm just trying to get my services up. All I am presented is a blank white screen and errors from app.bundle.js (which is generated at compile time), yet I do not have any compile errors while compiling.

And the app.bundle.js code which have errors are:

exports.isJsObject = isJsObject;
function print(obj) {
    console.log(obj);
}

and

var inits = injector.getOptional(application_tokens_1.APP_INITIALIZER);

which I have no idea as this is generated automatically. I apologise for the code dump(I have tried to remove unnecessary stuff) as I do not know which part of it went wrong.

My ionic version is : 2.0.0-beta.25 if that helps.

Any help would be deeply appreciated.

Answer 1

Had a look at your code. I could see that you have used Headers but haven't imported them in your code. In the httpService.js file modify the import statement as shown below.

import { Http, Headers } from 'angular2/http';

app.bundle.js is simply a bundle of modules generated by webpack which is popular module loader used by Ionic.

PS: If you are trying to implement an authentication system in your Ionic 2 application, I recommend you to have a look here .

Hope this helped you. Thanks.

Answer 2

I don't see the decorator @Injectable on your service...

export class httpService {

should be (i think, I´m using v24, maybe in v25 is different?)

import {Injectable, Inject} from "angular2/core";

@Injectable export class httpService {