New EventSystem in v7 is conflicting with zone.js in Angular projects

Expected Behavior

I should be able to use PixiJS in an Angular Project

Current Behavior

I get the following error when importing pixi.js v7.0.0 in an Angular projet:

Error: node_modules/@pixi/events/lib/FederatedEventTarget.d.ts:11:18 - error TS2320: Interface 'FederatedEventTarget' cannot simultaneously extend types 'EventEmitter<string | symbol, any>' and 'EventTarget'.
  Named property 'removeAllListeners' of types 'EventEmitter<string | symbol, any>' and 'EventTarget' are not identical.

11 export interface FederatedEventTarget extends utils.EventEmitter, EventTarget {
                    ~~~~~~~~~~~~~~~~~~~~

It turns out zone.js is monkey patching the native EventTarget interface (https://github.com/angular/angular/blob/37ba6104498202b671f5a5a6bbfacc4df501788b/packages/zone.js/lib/zone.api.extensions.ts#L29) to add a removeAllListeners?(eventName?: string): void; method, which conflicts with the removeAllListeners(event?: EventEmitter.EventNames<EventTypes>): this; method on the EventEmitter from the eventemitter3 package.

In an Angular projects (or any project using zone.js), it’s impossible to create an interface that extends EventEmitter (from eventemitter3) and EventTarget at the same time.

It’s possible to disable the monkey patch by adding this line to the Angular project (window as ZoneGlobalConfigurations).__Zone_disable_EventTarget = true; but the typing would still make the compilation fail.

Possible Solution

Still searching for one, does the FederatedEventTarget interface need to extend the EventTarget ?

Right now I can bypass the problem by not using the new EventSystem. So I have to avoid importing pixi.js or @pixi/events and only import the other packages individually (@pixi/core, @pixi/sprite, …)

Steps to Reproduce

• Create an angular project
• Install pixi.js
• Import pixi.js or @pixi/events somewhere
• Serve the project

Here is a reproduction repository: https://github.com/Julien-Marcou/angular-pixijs-issue-8794

Environment

• pixi.js version: 7.0.0
• angular version: 14.2.8
• zone.js version: 0.11.8

[bigtimebuddy]

Feel free to make a PR. Also, the change should include a note about why we’re re-declaring a looser type here.

[Julien-Marcou]

It’s not masking other EventEmitter conflicts as it’s only overriding the signature for FederatedEventTarget which is already working with a string | symbol event emitter.

Here is what we get right now:

And here is what we would get if we implement the fix: