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

问题描述

我无法将 pixi 连接到 angular我添加到 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'

推荐答案

angular 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 文件，则需要安装它.类型搜索

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

修改你在脚本数组中的路径

Modify your path in script array

 "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屋！