Currently trying to get Pixi.js 6 running with angular 12(but 11 does seem to face the same issue).
If I try to initialize a component with a canvas by pixi and add a sprite I do hit an issue with how Pixi initalizes it's base classes.
ERROR TypeError: Cannot read property 'start' of undefined at 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();
}
);
}
}
According to the docs the default behavior should be that few plugins are prepopulated. But if one does check for those they aren't set(see console out of example below) which yields the error above.
Recration of the issue: https://stackblitz.com/edit/angular-zvqwsh?file=src/app/hello.component.ts
If I do use the same pixi version in a simple setup it does work just fine. So my guess is that Angulars bundling is causing the issue but I can't figure out how. As the code is clearly present in the ESM bundles.
