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

Question

Не могу подключить пикси к угловому добавляю в 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/ Библиотека / сетка / WebGL"

Answer 1

Проекты CLI в угловых 6 и более применениях angular.json вместо .angular-cli.json для сборки и настройки проекта. Это означает, что вы используете Angular 6.
Начиная с версии 6 местоположение файла изменилось на 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);
        }
    }