ionicにjavascript仮想ジョイスティックを追加する

Question

私のIonic 3プロジェクトでNippleJS virtual joystickを使用したいと思います。最初にnpm install nipplejs --saveを使ってライブラリをインストールしました。次に、.htmlファイルと.tsファイルに以下のようなものを追加しました。

HTML：

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Test Virtual Joystick 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 

    <div id="zone_joystick"></div> 

</ion-content> 

TS

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { nipplejs } from 'nipplejs' 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController) { 
    var options = { 
     zone: document.getElementById('zone_joystick') 
    }; 

    var manager = nipplejs.create(options); 
    }  
} 

はしかし、私はCannot read property 'create' of undefined TypeErrorを取得します。私はこれをどのように扱うべきですか？

まず、それをインストールします：npm install nipplejs --save

次に、この

import nipplejs from 'nipplejs';のようにそれをインポート

Answer 1

は、あなたがこのようにそれをインポートする必要がありますのでnippleJSは、ES2015の標準に基づいて構築されていないように思えます

および使用それ

nipplejs.create(...);

EDIT

ちょうど@ Matthias247あなたはオプションでDOMから要素を含める必要があるため、あなたはionViewDidLoadライフサイクルフックでそのコードを配置する必要があり、彼のコメントで述べたように（DOMの準備ができていませんまだコンストラクタが実行された場合）：

ionViewDidLoad() { 

    // Now we know the DOM is ready 
    let options = { 
    zone: document.getElementById('zone_joystick') 
    }; 

    let manager = nipplejs.create(options); 

}