PreloadJS funktioniert nicht auf Angular (createjs-modul)

Question

Ich habe ein Problem mit eckigen & createjs-Modul.

Das CreateJS-Modul funktioniert, wie Sie auf dem Code sehen können, Form Methoden und Tweens arbeiten (ich es auf Browser visualisieren erfolgreich):

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

Aber wenn ich zu verwenden versuchen, die offizielle Dokumentation von CreateJS Vorbelastung und Verwendung von Bildern zu starten, passiert nichts:

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

Die Warteschlange wird nicht geladen. Ich habe ein Konsolenprotokoll am Ende von "ngOnInit" platziert, das funktioniert, aber kein Ereignis wird vom Objekt "queue" ausgelöst. Ich sehe keinen Fehler im Code, und ich sehe keinen Fehler/Warnung auf der Konsole.

Code: wobei ein Objekt des Fensters Objekt im Konstruktor Ihrer Komponente

 

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

Haben Sie versucht, createJs zu erklären?

Ich hatte einige Probleme mit Vorspannung js auf meinem Eckige 2 Projekt mit kantigem CLI und ich herausfinden, dass eine innerhalb des Prozesses der Vorbelastung Methode namens _isCanceled versuchen, mit einem window.createjs Objekt zu verarbeiten und wegen das war der ganze Event-Prozess wurde immer gestoppt. Aber in meinem Projekt wurde das createjs-Objekt nicht als Objekt des Fensters deklariert. Also habe ich versucht, dies:

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

Answer 2

Mit modernen javascript/Typoskript, das preloadjs Paket ist vielleicht nicht so wichtig?

Ich habe erfolgreich mit 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))