Extend PIXI.Container in Angular

[dszidi]

I'm trying to write an application using PIXI + Angular6/TypeScript. I'm getting stuck on how to extend PIXI classes. In particular I'm trying to extend PIXI.Container from typescript. I have both PIXI.js installed as well as the @types/pixi.js package. I'm importing using...

import { Container } from 'pixi.js';

My text editor is not showing any signs of errors but when I try to compile I get a wall of red text . All messages are like this...

 

Module not found: ERROR can't resolve 'path' in 'node_modules/pixi.js/lib/core/sprites/webgl''

...and the path ends with sprites/foo , extras/foo, and filters

Can somebody provide a little code snippet on how to do this. I can alternatively cheat a little and write a base class with getters/setters pointing at the various Container props, but I'd rather not do that.

[dszidi]

(I'm going to keep posting here in case somebody else runs into these issues in the future.)

Seems it was a missing dependency. `npm install --save-dev path` made the compiler errors go away. 

Now I get runtime error 

`Uncaught ReferenceError: global is not defined at Object../node_modules/pixi.js/lib/polyfill/requestAnimationFrame.js `

[dszidi]

Hmm, I found a workaround to make that "global is not defined" error go away but then I get another run time error.

I suspect that perhaps there is something misconfigured at a lower level here. Is there some setting that I need to add to ts.config file?

[ivan.popelyshev]

is that pixi-v5 or v4? I dont have a clue about modern import/export and packers, but I'll get specialists there, dont worry  

[dszidi]

The version is PIXI.js v4.8.3

[ivan.popelyshev]

Im sure that there was something about it in https://github.com/pixijs/pixi.js/issues

[botmaster]

For runtime, you need to include pixijs in your webpack vendor, for ts dev, you only need to tweak tsconfig and get your npm pixijs @types and library. 

the syntax should still be:

class XXX extends PIXI.Container < use namespace

The import { Container} from "pixi.js" will not work even in v5.

[dszidi]

36 minutes ago, ivan.popelyshev said:

Im sure that there was something about it in https://github.com/pixijs/pixi.js/issues

Just looked through the issues and things don't look good. Also, is it true that canvas support has been dropped?

 

[dszidi]

Well, I've tried a few of the proposed solutions and they don't seem to work for me. 

Also it currently doesn't seem to make a difference if I import using the "declare const PIXI: any" method or the more usual import { Application, Container ...} from 'pixi.js';

In both cases, everything with PIXI seems to be working just fine except for my inability to extend imported PIXI classes.

[ivan.popelyshev]

If its v4, do you use pixi-typescript github stuff? The same as in npm [email protected] ?

[dszidi]

No, I just installed @types/pixi.js via npm

 

[dszidi]

I'm just going to have to revisit this inheritance problem later I think. For what I'm doing right now I only need to write less than a dozen classes so fixing it later won't be too big of a task.

[botmaster]

I still use pixi 4.8.x and still extend using PIXI.xxxx syntax in simple typescript, Cordova, and ionic + angular projects. In all cases everything is fine both at runtime and dev time.

eg. 

export class Graphics extends PIXI.Graphics

[botmaster]

Note, dev time only requires the @types, those @types/pixi.js declare a global PIXI that you can use directly for extending and such. The setup for runtime is different. Dev time does not need PIXI code (.js) (it could not use it anyway), it only needs the @types. So:

Typescript dev time > only needs @type/pixi.js

app Runtime > needs pixi.js (pack with webpack or such)