How can I work around this onmessage error?

Question

I'm trying to implement SSE in my code, but my onmessage doesn't seem to work and I keep getting this error Type '(event: MessageEvent) => void' is not assignable to type '(this: EventSource, ev: MessageEvent) => any'. Types of parameters 'event' and 'ev' are incompatible. Type 'MessageEvent' is missing the following properties from type 'MessageEvent': origin, ports, source, initMessageEvent, and 20 more.ts(2322) (property) SseService.eventSource: EventSourcePolyfill.

This is my code:

import {Injectable, NgZone} from "@angular/core";
import {Observable, Subject} from "rxjs";
import {AService} from "./a.service";
import {EventSourcePolyfill} from "event-source-polyfill";

@Injectable({
    providedIn: "root",
})
export class SseService {
    private eventSource!: EventSourcePolyfill | null;

    private sseEventSubject = new Subject<MessageEvent>();

    public constructor(private aService: AService, private zone: NgZone) {}

    public connectToServerSentEvent(url: string): void {
        console.log("connectToServerSentEvent", url);
        const token = this.aService.config.authorization;
        const headers = {Authorization: `Bearer ${token}`};

        this.eventSource = new EventSourcePolyfill(url, {
            withCredentials: false,
            headers,
        });

        this.eventSource.onmessage = (event: MessageEvent): void => {
            this.zone.run(() => this.processSseEvent(event));
        };

        this.eventSource.onerror = (error): void => {
            console.error("SSE error:", error);
        };
    }

    public disconnectFromServerSentEvent(): void {
        console.log("disconnectFromServerSentEvent");
        this.eventSource?.close();
    }

    public getServerSentEvent(): Observable<MessageEvent> {
        return this.sseEventSubject.asObservable();
    }

    private processSseEvent(sseEvent: MessageEvent): void {
        this.sseEventSubject.next(sseEvent);
    }
}

I tried to run event handling in the NgZone, since it's an event coming outside of Angular but that didn't work, I tried to follow this solution Solution but I was still getting that error

Answer 1

You need to import the MessageEvent from the polyfill. It's not using the native one in the signature.

import {EventSourcePolyfill, MessageEvent} from "event-source-polyfill";