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

Question

我正在尝试为我的登录页面创建一个简单的 HTTP 发布服务。

由于一些奇怪的原因，我在 app.bundle.js 中遇到了错误：

TypeError：无法读取未定义的属性“toString”

未捕获的类型错误：无法读取未定义的属性“getOptional”

使用ionic2教程示例项目，我做了以下工作：

在我的 app.js 中（所以我的服务可以在全球范围内访问）

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

并将 rootPage 设置为我的登录页面

this.rootPage = LoginPage;

在我的login.html中

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

在我的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());

    }

}

如您所见，我只是想提升我的服务。我看到的只是一个空白屏幕和来自 app.bundle.js 的错误（在编译时生成），但我在编译时没有任何编译错误。

而有错误的app.bundle.js代码是：

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

和

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

我不知道，因为这是自动生成的。我为代码转储道歉（我试图删除不必要的东西），因为我不知道它的哪一部分出错了。

如果有帮助，我的离子版本是：2.0.0-beta.25。

任何帮助将不胜感激。

Answer 1

我在你的服务上没有看到装饰器 @Injectable...

导出类 httpService {

应该是（我想，我使用的是 v24，也许 v25 不同？）

从“angular2/core”导入{Injectable, Inject}；

@可注入 导出类 httpService {

Answer 2

查看了您的代码。我可以看到您使用了标头，但没有在您的代码中导入它们。在httpService.js文件中修改import语句如下图。

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

app.bundle.js 只是一个由 webpack 生成的模块包，它是 Ionic 使用的流行模块加载器。

P.S：如果您尝试在 Ionic 2 应用程序中实现身份验证系统，我建议您查看here。

希望这对您有所帮助。谢谢。