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

在编译时，我收到一个错误

./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js 中的错误 找不到模块：错误：无法解析“/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);
        }
    }