試圖編譯並運行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時出現空白屏幕

回答

相關問題