Angular 12+ с неправильной инициализацией Pixi 6

Question

В настоящее время пытаюсь запустить Pixi.js 6 с angular 12 (но 11, похоже, сталкивается с той же проблемой).

Если я попытаюсь инициализировать компонент с помощью холста с помощью pixi и добавить спрайт, я столкнусь с проблемой, связанной с тем, как Pixi инициализирует его базовые классы.

ОШИБКА TypeError: невозможно прочитать свойство start of undefined в BatchSystem.setObjectRenderer (BatchSystem.ts:56)

      import { AfterViewInit, Component, ElementRef, NgZone } from "@angular/core";
import { Application } from "@pixi/app";
import { Sprite } from "@pixi/sprite";
@Component({
  selector: "hello",
  template: `
    <h1>game</h1>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent implements AfterViewInit {
  constructor(public elRef: ElementRef, private zone: NgZone) {
    // The application will create a canvas element for you that you
    // can then insert into the DOM.
  }

  public ngAfterViewInit(): void {
    this.zone.runOutsideAngular(
      (): void => {
        const app: Application = new Application({
          //view: this.myCanvas.nativeElement,
        });
        this.elRef.nativeElement.appendChild(app.view);
        console.log("Plugins", app.renderer.plugins);
        const sprite: Sprite = Sprite.from(
          "https://avatars.githubusercontent.com/in/2740?s=64&v=4"
        );
        app.stage.addChild(sprite);
        app.render();
      }
    );
  }
}

Согласно документации, поведение по умолчанию должно заключаться в том, что несколько плагинов предварительно загружены. Но если проверить, что они не установлены (см. Консоль из примера ниже), это приведет к ошибке, указанной выше.

Решение проблемы: https://stackblitz.com/edit/angular-zvqwsh?file=src/app/hello.component.ts

Если я использую ту же версию pixi в простой настройке, она работает нормально. Итак, я предполагаю, что проблема связана с объединением Angulars, но я не могу понять, как это сделать. Поскольку код явно присутствует в пакетах ESM.

Answer 1

Когда я попытался отладить его, плагины зарегистрированы в node_modules / pixijs / dist / esm / pixi.js, поскольку проект angular не импортирует его, плагины не зарегистрированы должным образом. Я добавил : import * as PIXI from 'pixi.js'; вверху файла и добавлена ​​строка под ним, чтобы избежать тряски дерева, чтобы удалить pixi.js из окончательного пакета console.log(PIXI.VERSION);Рабочая версия: https://stackblitz.com/edit/angular-2cwx4k?file=src/app/hello.component.ts