Angular 12+，Pixi 6未正确初始化

Question

目前正试图让Pixi.js 6运行angular 12(但11似乎也面临同样的问题(。

如果我试图通过pixi用画布初始化一个组件并添加一个sprite，我确实遇到了pixi如何初始化它的基类的问题。

错误类型错误：无法读取未定义的属性"start"在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