PreloadJSがAngular（createjs-module）で動作しない

Question

私は、角度& createjs-moduleに問題があります。あなたは、コード上で見ることができるよう

createjsモジュールは、働いている、形状方法やトゥイーンは、（私は成功し、ブラウザ上でそれを視覚化することができます）作業している：

https://www.npmjs.com/package/createjs-module

しかし、私が使用しようとすると、 createjsからの公式ドキュメントをプリロードして使用して画像を開始するには、何も起こりません：

http://createjs.com/docs/preloadjs/classes/LoadQueue.html

キューがロードされません。私は動作する "ngOnInit"の最後にコンソールログを置くが、イベントは "キュー"オブジェクトからディスパッチされない。 コードにエラーが表示されず、コンソールにエラー/警告が表示されません。

コード：

 

import { Component, OnInit, ViewChild } from '@angular/core'; 
import * as createjs from 'createjs-module'; 

@Component({ 
    selector: 'app-mycomp', 
    templateUrl: './mycomp.component.html', 
    styleUrls: ['./mycomp.component.css'] 
}) 
export class MyClass implements OnInit { 

    public stage; 

    public queue; 

    public queueManifest = [ 
    {id:"header", src:"header.png"}, 
    {id:"body", src:"body.png"}, 
    {id:"footer", src:"footer.png"} 
    ]; 
    constructor() { } 

    ngOnInit() { 
    ///THIS CODE WORKS! 
    this.stage = new createjs.Stage("myCanvas"); 

    createjs.Ticker.setFPS(60); 
    createjs.Ticker.addEventListener("tick", this.stage); 

    var circle = new createjs.Shape(); 
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50); 
    circle.x = 10; 
    circle.y = 10; 
    this.stage.addChild(circle); 

    createjs.Tween.get(circle, { loop: true }) 
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ alpha: 0, y: 225 }, 100) 
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

    this.stage.update(); 

    ///THIS CODE DOES NOT WORK! 
    this.queue = new createjs.LoadQueue(); 
    this.queue.on("progress", this.queueProgress, this); 
    this.queue.on("complete", this.queueComplete, this); 
    this.queue.on("error", this.queueError, this); 
    this.queue.loadManifest(this.queueManifest); 

    ///THIS LINE IS ON CONSOLE! 
    console.log("queue START"); 
    } 
    ///NONE OF THIS IS DISPATCHING 
    public queueProgress() 
    { 
    console.log("queue progress"); 
    } 
    public queueError() 
    { 
    console.log("queue error"); 
    } 
    public queueComplete() 
    { 
    console.log("queue finished"); 
    } 
} 

Answer 1

はあなたのコンポーネントのコンストラクタでウィンドウオブジェクトの対象となるcreateJsを宣言しようとしましたか？

は、私は角CLIと私の角度2プロジェクトにプリロードJSといくつかの問題を抱えていたと私はプリロードのプロセス内 と呼ばれる方法がが window.createjs対象としてのために処理しよう_isCanceledことを把握しますこれにより、イベントのプロセス全体が常に停止されていました。しかし、私のプロジェクトでは、createjsオブジェクトはウィンドウのオブジェクトとして宣言されていませんでした。 preloadjsパッケージは多分それほど必須ではなく、現代の ジャバスクリプト/ typescriptですで

constructor() 
{ 
    (<any>window).createjs = createjs; 
    this.queue = new createjs.LoadQueue(); 
} 

Answer 2

：だから、私はこれを試してみましたか？

私はPromise.then()

static 
loadImage(url: string): Promise<HTMLImageElement> { 
    return new Promise((res, rej) => { 
     const img: HTMLImageElement = new Image(); 
     img.onload=(evt => res(img)); 
     img.onerror=(() => rej("failed to load "+url)); 
     img.src = url; // start loading 
    }); 
} 
loadImage(url).then((img) => processImage(img)) 

で成功を収めてきました