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

Question

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

由于某些奇怪的原因，我在 app.bundle.js:

中遇到了错误

TypeError: Cannot read property 'toString' of undefined

Uncaught TypeError: Cannot read property 'getOptional' of undefined

使用 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;

在我的日志中-in.html

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

在我的日志中-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

看过你的代码。我可以看到您使用了 Headers 但没有将它们导入到您的代码中。在 httpService.js 文件中修改导入语句，如下所示。

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

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

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

希望对您有所帮助。谢谢

Answer 2

我没有在您的服务中看到装饰器@Injectable...

导出class httpService {

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

从 "angular2/core" 导入 {Injectable, Inject};

@可注射导出 class http服务 {

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

Empty white screen while trying to compile and run ionic2

javascript

ionic-framework

ionic2

angular

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

Empty white screen while trying to compile and run ionic2

javascript

ionic-framework

ionic2

angular

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