Use PixiJs in Angular 6

问题

I can not connect a pixi to an angular I add to angular.json

"scripts": [
    "../node_modules/pixi.js/lib/index.js"
],

In Class:

import * as PIXI from 'pixi.js';

export class Render {
    public app: any;

    constructor(el) {
        this.app = new PIXI.Application({
            width: 800,
            height: 600
        });
        el.nativeElement.insertAdjacentHTML('beforeend', this.app.view);
    }
}

At compilation, I receive an error

ERROR in ./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js Module not found: Error: Can't resolve 'path' in '/home/ashenemy/testProj/new-tuning-project/node_modules/pixi.js/lib/mesh/webgl'

回答1:

CLI projects in angular 6 onwards uses angular.json instead of .angular-cli.json for build and project configuration. That implies you are using Angular 6.
As of v6, the location of the file has changed to angular.json. Since there is no longer a leading dot, the file is no longer hidden by default and is on the same level. which also means that file paths in angular.json should not contain leading dots and slash i.e you can provide an absolute path

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function, and variables can have defined types, if you want to use an external library such as pixi.js you need to declare type definitions for TypeScript. Some libraries include typing file and you don’t need to install TypeScript’s type destination for them. But in case a library does not have .d.ts file, you need to install it.Type Search

Execute npm install --save @types/pixi.js

Modify your path in script array

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

In your component

   //import * as PIXI from 'pixi.js';

declare var PIXI:any;<--use this

    export class Render {
        public app: any;

        constructor(el) {
            this.app = new PIXI.Application({
                width: 800,
                height: 600
            });
            el.nativeElement.insertAdjacentHTML('beforeend', this.app.view);
        }
    }

来源：https://stackoverflow.com/questions/50824085/use-pixijs-in-angular-6

标签

angular

angular-cli

pixi.js