Unable to setup pixi-projection on Angular project

[colorao]

Hi. I've installed both pixi.js and pixi-projection npm packages on angular. Pixi.js works fine as it has exports, but pixi-projection does not work.

On load time, pixi-projection.js directly needs PIXI to exist to overlay its methods, but PIXI is inside a node_module package, and is not present until it is needed (later). So I get an error.

Any ideas on this?

[ivanpopelyshev]

Angular uses webpack, right? It depends on our configuration. Somehow, https://github.com/pixijs/pixi-projection/blob/master/test/checkpack.ts works fine. Just add two imports, first pixijs then pixi-projection.

I advice to put all those libs as entry points. No need to include them in bundle.

[colorao]

Thanks Ivan, but I think Angular does not allow importing that way: import 'pixi.js'; import '../dist/pixi-projection.js';

I just can import modules this way import { Point , BaseTexture} from 'pixi.js'; I don't know how to solve this

[ivanpopelyshev]

I hate ES6 imports/exports. I think that all modern JS modules approaches were made hastely, it is all a big mistake.

However, I like people who use my plugins and that's why I adopted usage of @cursedcoder checkpack

Try find a way to change any of plugins (pixi-spine , pixi-projection) that way they work with angular too, and add help checkpack author to add it there, then all my plugins will support angular too :)

[colorao]

Hi Ivan Your plugins are fantastic. There's no problem on that.

I'll try to tune it a bit just to make it work on Angular. Thanks a lot.

[cursedcoder]

Hi @colorao,

when we used Angular for our project it was a bit cumbersome to include pixi with all plugins there,

as a solution we built own package with everything we needed: pixi, pixi-sound, pixi-heaven, etc.

not sure if Angular-cli has improved since then, but at time it wasn't possible to tweak build process that much.

[colorao]

Hi, Finally followed that way. Joined everything into a single .js file and loaded it on index.html That way everything loads and parses together.

Not an elegant way, but works.... Thanks all.

[tomq123]

import * as PIXI from 'pixi.js'
import 'pixi-projection'

works fine.