Используйте PixiJs в Angular 6 - PullRequest
Новая
       79

Используйте PixiJs в Angular 6

0 голосов
/ 12 июня 2018

Не могу подключить 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 '

1 Ответ

0 голосов
/ 12 июня 2018

CLI проектов в Angular 6 и далее использует 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);
        }
    }
...