Import in Angular 9

[CardzMania]

import * as PIXI from 'pixi.js';
import 'pixi-layers';

doesn't work, tried a lot of other variations also but to no avail.

Please advise how we can import it with Angular 9, thanks!

[ivanpopelyshev]

as said in README,

import * as PIXI from "pixi.js";
window.PIXI = PIXI;
require("pixi-layers")

if it doesnt work for you - im sorry, i cant support angular 9 because i am not writing on angular 9 stuff. There were manuy issues with that in pixi plugins, we are working on new super-system for all plugins that will solve it.

[CardzMania]

Thanks for the quick response, I tried that as well, doesn't work. Any ETA for the new "super-system"?

Any recommendation how I could merge the two js myself to use as one combined js?

[ivanpopelyshev]

ETA - Previous year :)
Recomendation - there were a few issues with angular in main pixi repo, look in closed issues.

[CardzMania]

Thanks, I know that feeling, we wanted to launch with pixi magic two years ago! :)

But seriously, any realistic chance of having this new framework available soon? Just trying to get an idea so we can plan things accordingly. Thanks a ton!

[lycwed]

add PIXI into script to load directly in angular.json, in build options:

"scripts": [ "node_modules/pixi.js/dist/pixi.min.js" ]

Then no need to import * as PIXI from 'pixi.js' in the project after that, just import your plugins as needed! Hope it helps!

[ChristophWalter]

The only way we were able to run pixi, pixi-layers and Angular was by using a custom webpack configuration to provide PIXI globally. This way webpack can also bundle up all dependencies, which would not be possible when importing the minifed script directly as stated by @lycwed.

// custom-webpack-config.js
const webpack = require("webpack");
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      PIXI: "pixi.js",
    }),
  ],
};

Adapt your angular.json accordingly:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      ...
    },
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    ...
  }
}

This requires two new dependencies: @angular-builders/custom-webpack and @angular-builders/dev-server.

You can read more about custom webpack configurations in Angular here: https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config

[Flippsor]

Trying to get pixi-layers plugin to work with angular & webpack, but no success for now.

@ChristophWalter also tried the approach with custom webpack config, but got following error
TypeError: pixi_layers__WEBPACK_IMPORTED_MODULE_1__.Layer is not a constructor

Code:

import * as PIXI from 'pixi.js';
import * as PIXILayer from 'pixi-layers';
public pixiContainer: PIXILayer.Layer = new PIXILayer.Layer();

Maybe something wrong with the imports?

[lycwed]

I don't use this package anymore, but here's how I did it :

import * as PIXI from 'pixi.js';
import 'pixi-layers';

public pixiContainer: PIXI.display.Layer = new PIXI.display.Layer();

If you use PIXI layer to use zOrder, you better use pixijs v5 and zIndex, it's what I use now ;)

[Flippsor]

Going to try it out. The problem with PIXI zIndex is that the index only sorts all childs within a parent.

In my application i need to sort through several parents. As far as i know this is not possible with PIXI zIndex.

[ivanpopelyshev]

PIXI has to be somewhere in globals, in window, before pixi-layers is imported. Provided maybe, that's why i usually use require('pixi-layers');. We are fixing all that in upcoming pixi v6 very soon.