在Angular 6中使用PixiJ [英] Use PixiJs in Angular 6

问题描述

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

I can not connect a pixi to an angular I add to 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);
    }
}

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

At compilation, I receive an error

./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js中的

错误 找不到模块:错误:无法解析"/home/ashenemy/testProj/new-tuning-project/node_modules/pixi.js/lib/mesh/webgl"中的路径"

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'

推荐答案

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

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是JavaScript的类型化超集，可编译为普通JavaScript. TypeScript具有自己的语法，函数，并且变量可以具有定义的类型，如果要使用外部库(例如pixi.js)，则需要声明TypeScript的类型定义.有些库包含键入文件，您无需为其安装TypeScript的类型目标.但是如果库中没有.d.ts文件，则需要安装它. Type Search

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

执行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中使用PixiJ的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！