angular - 在 Angular 6 中使用 PixiJs

Question

我无法将 pixi 连接到 angular我添加到 angular.json

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

在类里面:

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);
    }
}

编译时出现错误

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'

Answer 1

angular 6 及更高版本的 CLI 项目使用 angular.json 而不是 .angular-cli.json 进行构建和项目配置。这意味着您正在使用 Angular 6。
从 v6 开始，文件的位置已更改为 angular.json。由于不再有前导点，默认情况下该文件不再隐藏并且处于同一级别。这也意味着 angular.json 中的文件路径不应包含前导点和斜杠，即您可以提供绝对路径

TypeScript 是 JavaScript 的类型化超集，可编译为纯 JavaScript。 TypeScript 有自己的语法、函数和变量可以定义类型，如果你想使用外部库，比如 pixi.js 你需要为 TypeScript 声明类型定义。一些库包含类型文件，你不需要为它们安装 TypeScript 的类型目标。但是如果库没有 .d.ts 文件，则需要安装它。 Type Search

执行 npm install --save @types/pixi.js

修改脚本数组中的路径

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

在你的组件中

   //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);
        }
    }