在Angular 6中使用PixiJs

Question

在Angular 6中使用PixiJs

3

我无法将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 模块未找到: 错误详情: 无法解析路径 '/home/ashenemy/testProj/new-tuning-project/node_modules/pixi.js/lib/mesh/webgl' 中的 'path'

- Ashot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikas · Accepted Answer

从 Angular 6 开始，CLI 项目使用 angular.json 而不是 .angular-cli.json 进行构建和项目配置。这意味着您正在使用 Angular 6。
从版本 6 开始，该文件的位置已更改为 angular.json。由于不再有前导点，因此该文件不再默认隐藏，并且在同一级别上。这也意味着 angular.json 中的文件路径不应包含前导点和斜杠，即您可以提供绝对路径。
TypeScript 是 JavaScript 的类型超集，编译为纯 JavaScript。TypeScript 有自己的语法，函数和变量可以定义类型，如果您想使用外部库（如 pixi.js），则需要为 TypeScript 声明类型定义。一些库包括 typing 文件，您不需要为它们安装 TypeScript 的类型目的地。但是，如果库没有 .d.ts 文件，则需要安装它。Type Search

执行 npm install --save @types/pixi.js
修改 script 数组中的路径。

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