EventSource issue with Angular 7

Question

I have migrated from Angular 5 to Angular 7 since then EventSource is not working for me in my application. After googling i found something EventSourcePolyfill so i have imported in my component.

See below: This error i am getting frequently i mean to say for every second.

core.js:12584 ERROR Error: No activity within 1000 milliseconds. Reconnecting.
    at eventsource.js:411
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

My question is why EventSource is not working in Angular 7? Is there any other package similar to EventSource.

See below my code:

import { EventSourcePolyfill } from 'ng-event-source';

ngOnInit() {
        this.tasks();
        this.connect();
}

tasks() {
        this.handler.activateLoader();
        this.tasksService.get(this.page, this.pageSize).subscribe(results => {
            this.handler.hideLoader();
            if (this.handler.handle(results)) {
                return;
            }
            this.tasksRes = results['data'];
            for (let i = 0; i < this.tasksRes.length; i++) {
                if (this.tasksRes[i].status == 'In_progress' && this.tasksRes[i].eventType == 'Sync' &&
                    this.tasksRes[i].entityId == this.id) {
                    this.progressFlag = true;
                    break;
                } else {
                    this.progressFlag = false;
                }
            }
            this.length = results['totalElements'];
        }, error => {
            this.handler.hideLoader();
            this.handler.error(error);
        });
    }

    connect() {
        let source = new EventSourcePolyfill('/api/v1/events/register', { heartbeatTimeout: 1000, connectionTimeout: 1000 });
        source.addEventListener('message', message => {
            this.tasks();
        });
    }

The above code is giving me the error as follows:

Please help me in this issue.

Answer 1

Consider changing declaration from

{ 
  heartbeatTimeout: 1000, 
  connectionTimeout: 1000 
}

to

{ 
  heartbeatTimeout: 1000, 
  connectionTimeout: 1000,
  errorOnTimeout: false
}

So an event will be displayed instead of a critical error