Pixi.js: Latest Pixi not compatible with Angular 7

[krojew]

Continuation of https://github.com/pixijs/pixi.js/issues/4921 since it's not resolved for v7.

Expected Behavior

Angular 7 with Pixi should build.

Current Behavior

Build fails with multiple instances of:

Module not found: Error: Can't resolve 'path' in ...

Steps to Reproduce

Install Pixi with Angular 7, using official npm packages. Run ng build or ng serve.

Environment

• pixi.js version: 4.8.5
• OS & Version: Ubuntu 18.10
• Angular version: 7.1.2

[bigtimebuddy]

Could you please provide a repo the reproduces? We are not Angular folks here and need some help figuring out this integration. Thanks.

[ivanpopelyshev]

Try this one.

https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

[krojew]

This is a simple project based on the previous bug, but updated to the latest versions: https://github.com/krojew/test-pixi

After cloning, run npm install and ng build. You should see a lot of errors from pixi relating to 'path'.

[Galiza]

Yep, the issue does happen to me as well.
This was the solution for me: https://github.com/pixijs/pixi.js/issues/4921#issuecomment-399661281

[clark-stevenson]

My Stackblitz seems fine: App

I just updated dependencies, added pixi.js and @types/pixi.js

Then pasted this into app.component.ts

import { Component } from '@angular/core';
import { Application } from 'pixi.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private app = new Application();
}

It works fine, it asks for a url dependency but I presume that is just Stackblitz?

Anyway, locally, the exact same project fails to build with the same errors above. 😕 How can that be?

[ivanpopelyshev]

I take it , link that I sent is not related to the issue? It cant find path module, is that right?

[clark-stevenson]

@ivanpopelyshev

Ahh sorry! I missed your link somehow.

On the link you sent us above. I looked at just the first "annoying example".

This file

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

By default is node: false but when when it is changed to node: { path: true }. Then the following commands work.

• ng serve
• ng build
• ng build --prod

Soon as I flip that back to node: false. We return to this Issue.

We can I guess assume the article is correct, this is a webpack or angular issue. Pixi just has the symptoms. None the less, for the people experiencing this with pixi, nothing in that article is ideal, I am not sure where we can go to shake a collective fist.

[krojew]

Maybe there's a way to gracefully handle node dependencies? At the moment, pixi is the only package I've encountered with this issue, so I suspect there is a way to do it.

[bigtimebuddy]

With other bundlers, they have builtins polyfills for node.js modules like path. I assume maybe there’s something similar in Angular?

[krojew]

Given that other packages build with Angular, I suspect it's up to the package to handle it.

[bigtimebuddy]

I don't think path is used in many places, so I can switch over to use https://www.npmjs.com/package/path instead, which should solve this.

[axelvaindal]

@bigtimebuddy Any plan to release your proposal in a new fix anytime soon ?
We are heavily relying on pixi in a Meteor.js environment using webpack, and this bug pretty much breaks all our application :confused:

[bigtimebuddy]

PR welcome to v4.x branch to fix this. I have a release I need to do for v4 so we should be able to get this out quickly.

[axelvaindal]

I've managed to make my project work by running npm install --save path so it would be bundled along pixi client side.
@bigtimebuddy
I'll propose a PR that just add path as a dependency to pixi.js, I assume it's the only thing I have to do so the require looks for bundled module instead of the native one right ?

[ivanpopelyshev]

Is there module version of pixi-v4? I thought we have that only in v5.

[krojew]

Any news?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.