PreloadJS not working on Angular (createjs-module)

Question

I'm having an issue with angular & createjs-module.

The createjs-module is working, as you can see on the code, shape methods and tweens are working (I can visualize it on browser successfully):

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

But when I try to use the official docs from createjs to start preloading and using images, nothing happens:

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

The queue does not load. I put a console log at the end of the "ngOnInit" that does work, but no event is dispatched from the "queue" object. I don't see any error on the code, and I don't see any error/warning on the console.

code:


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");
  }
}

score 3 · Answer 1 · edited Aug 20 '17 at 03:27

3

Did you try to declare createJs being an object of the window object in the constructor of your component?

I had some problems with preload js on my Angular 2 project with Angular CLI and I figure out that inside the process of the preload a method called _isCanceled try to process with a window.createjs object and because of this, the whole event process was being always stopped. But in my project, the createjs object was not declared as an object of the window. So, I tried this:

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

edited Aug 20 '17 at 03:27

always-a-learner

3,671
10
41
81

answered Aug 20 '17 at 02:21

Daniel Priori

31
4

This also fixes problems with webpack, typescript and ES6 modules. I have no idea why it works but it works. – not_a_bot_no_really_82353 Dec 06 '20 at 01:14

score 0 · Answer 2 · edited Jan 02 '18 at 06:15

With modern javascript/typescript, the preloadjs package is maybe not so essential?

I've been successful with 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))

PreloadJS not working on Angular (createjs-module)

2 Answers2