带有 Pixi 6 的 Angular 12+ 未正确初始化答案

【问题标题】：Angular 12+ with Pixi 6 not initializing correctly带有 Pixi 6 的 Angular 12+ 未正确初始化
【发布时间】：2021-07-09 12:09:43
【问题描述】：

目前正试图让 Pixi.js 6 以 angular 12 运行（但 11 似乎确实面临同样的问题）。

如果我尝试通过 pixi 使用画布初始化组件并添加精灵，我确实遇到了 Pixi 如何初始化其基类的问题。

错误类型错误：无法读取未定义的属性“开始” 在 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();
      }
    );
  }
}

根据docs，默认行为应该是预填充的插件很少。但是，如果确实检查了那些未设置的内容（请参阅下面的控制台示例），则会产生上述错误。

问题回复：https://stackblitz.com/edit/angular-zvqwsh?file=src/app/hello.component.ts

如果我在简单的设置中使用相同的 pixi 版本，它确实可以正常工作。所以我的猜测是 Angulars 捆绑导致了这个问题，但我不知道是怎么回事。因为代码清楚地存在于 ESM 包中。

【问题讨论】：

标签： angular typescript pixi.js angular12

【解决方案1】：

当我尝试调试它时，插件注册在node_modules/pixijs/dist/esm/pixi.js，因为角度项目没有导入它，插件没有正确注册。我已经添加了这个：

import * as PIXI from 'pixi.js';

在文件顶部并添加到以下行以避免摇晃以从最终包中删除 pixi.js

console.log(PIXI.VERSION);

工作版本：https://stackblitz.com/edit/angular-2cwx4k?file=src/app/hello.component.ts

【讨论】：