Loading remote files with Phaser CE while in Angular CLI?

[Teonnyn]

I have Angular 5 and Phaser CE set up, and loading correctly. When running a test state, I can get the system to render text from a text object.

However, when I try to load an atlas and image from my server, these items show up as being brought into the client in the browser debug console - I can see, and click on the links of both. Phaser, though, produces a few errors. 

    preload()
    {
        // Handle Application-specific graphics loading //
        if (Global.gameKey != undefined)
        {
            let image = Global.currentImage;
            let json = Global.currentJSON;
            this.load.atlasJSONHash('emoji', image, json );
        }

        switch(Global.gameKey)
        {

        }
    }

    create()
    {
        if (Global.gameKey == undefined)
        {
            this.state.start('NullState');
        } else {
            this.load.onLoadStart.add(this.loadStart, this);
            this.load.onLoadComplete.add(this.onLoadComplete, this);
            this.load.start();
        }
    }

    onLoadComplete()
    {
        console.log("Switching");
        switch(Global.gameKey)
        {
            case "drop":
                this.state.start('Drop', true, false);
            break;
        }
    }

The two errors produced here are

Phaser.Loader - textureatlas[emoji]: Cannot read property 'x' of undefined

and 

Phaser.Cache.getImage: Key "emoji" not found in Cache.

The server is CORS enabled and under my control, and I can actually "see" both files apparently get loaded, but the Phaser cache appears to be ignoring them. Any object created that uses the atlas shows up with the second error. Is this issue something Webpack or Angular CLI related, or am I missing something in the code?

 

[samme]

It doesn't sound like a network problem.

Verify the arguments in atlasJSONHash.

Try the simplest case — just load the atlas and add it to the game, nothing else.

[Teonnyn]

I'll try that, though interestingly enough I have a previous version that was not using Angular CLI - just plain Javascript and some jQuery. That was having no trouble loading the atlas and json file associated with positioning.

[Teonnyn]

Okay, check on the image. That itself loads perfectly. Not entirely sure what's going on with the atlas though. I based it off the one generated by TexturePacker for Phaser. My own version is also generated automatically when these files are created.

I had a hunch that it might be because the atlas was trying to locate a local file and not finding it, but redirecting the meta to look at the server has had no effect on loading thus far.

[Teonnyn]

Fixed things! Looks like it's been in how the latest version of Phaser CE reads atlas files. I removed one line of code in the generator that appended a name to the top, rebuilt the atlas, and it's now behaving properly. I also trimmed directory path and file extensions as well, although numbers would do just as good, from everything but the file link.