PreloadJS не работает на Angular (createjs-модуль)

Question

У меня проблема с угловым & createjs-модулем.

Модуль 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 быть объектом оконного объекта в конструкторе вашего компонента?

У меня были некоторые проблемы с предварительной загрузкой js в моем проекте Angular 2 с Angular CLI, и я выяснил, что внутри процесса предварительной загрузки метод с именем _isCanceled пытается обработать объект window.createjs, и поэтому весь процесс обработки событий всегда останавливался Но в моем проекте объект createjs не был объявлен как объект окна. Итак, я попробовал это:

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

Answer 2

С современным javascript/ машинопись, preloadjs пакет может быть не так необходим?

Я был успешным с 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))