Question

我无法将pixi连接到角度我添加到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'中的'path'

Answer 1

角度为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);
        }
    }

在Angular 6中使用PixiJs

1 个答案: