试图编译并运行ionic2时出现空白屏幕

我试图为我的登录页面创建一个简单的HTTP post服务。试图编译并运行ionic2时出现空白屏幕

一些奇怪的原因，我在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，如果有帮助。

任何帮助将深表谢意。

来源

2016-04-15 Gene

是什么'@ App'？ –

@A_Singh在离子2中，这意味着应用程序级别？我并不确定。 – Gene

这是一个由离子实现的定制装饰器。无论如何它没关系，也许别的东西不是 –

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

出口类的HTTPService {

应该是（我认为，使用I'm V24，也许在V25是不同的？）

进口{注射，进样}从 “angular2 /芯”;

@Injectable 出口类的HTTPService {

来源

2016-04-15 12:33:55 JUtrilla

此外，这是一个很好的地方，了解你正在triyng做什么：http://www.gajotres.net/ionic-2-handling-a-simple-user-authorization/2/ – JUtrilla

要添加，删除app.js中的提供程序并将其添加到log-in.js中可行。 – Gene

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

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

app.bundle.js是简单地通过的WebPack其是通过使用离子流行模块加载程序产生模块的束。

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

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

来源

2016-04-15 12:05:27

试图编译并运行ionic2时出现空白屏幕

回答

相关问题