angular2 use sse and create observable then solve get value but component has no result

Question

Component gives no result, why? create Observable has any problem?

//service.ts
import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import {EventSource} from '../../../lib/EventSource';
@Injectable()
export class SitestatService {
  constructor(private http: Http) {
  }
  getSiteStatInfo(opts): Observable<any> {
      let observable =  Observable.create(observer => {
        let eventSource = new EventSource(opts.url);
        eventSource.onmessage = x => {
          observer.next(x.data);
          console.log(x.data, '=================>data');
        };
      });
    return observable;

  }
}

///////////////////////////////////////////////////

//resolve.ts
import {ActivatedRoute, Router, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import {Observable} from 'rxjs/Rx';
import {Injectable} from '@angular/core';
import {RequestOptions, Headers} from "@angular/http";
import {SitestatService} from "./sitestat.service";
@Injectable()
export class SitestatResolve {
  constructor(private sitestatService: SitestatService) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|any {
    let opts = {
      url: 'http://127.0.0.1:3333/sitestat'
    };
    // return opts;
    return this.sitestatService.getSiteStatInfo(opts);

//component
import {Component, OnInit} from '@angular/core';
import {SitestatService} from "./sitestat.service";
import {ActivatedRoute} from "@angular/router";
import {Observable} from "rxjs/Rx";

@Component({
    selector: 'app-sitestat',
    templateUrl: './sitestat.component.html',
    styleUrls: ['./sitestat.component.scss']
})
export class SitestatComponent implements OnInit {
    public currentTime: Date = new Date();
    public siteStatInfo: Object;

    constructor(private  sitestatService: SitestatService, public route: ActivatedRoute) {
        window.setInterval(() => this.currentTime = new Date()
            , 1000);
      }

    ngOnInit() {
      console.log(this.route.snapshot.data['sitestatInfo'], '==============>siteStatInfo');
      console.log(this.route.snapshot.data, '====================SitestatComponent');
    }

}
  }
}

Answer 1

Not my idea, just found it on a french blog, so I'm just translating the main idea (source: https://blog.octo.com/angular-2-sse-et-la-detection-de-changements/). Hope it helps.

The reason might be that angular does not trigger a DOM refresh when you register your observable. Actually, ng did not detect a DOM change because the notification is done from within the EventSource, and ng is not aware of it.

In order to solve it, you have to invoke observer.next() inside a callback run from a NgZone:

//service.ts
import { Injectable, NgZone } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
import {EventSource} from '../../../lib/EventSource';
@Injectable()
export class SitestatService {
  constructor(private http: Http, private zone: NgZone) {
  }
  getSiteStatInfo(opts): Observable<any> {
      let observable =  Observable.create(observer => {
        let eventSource = new EventSource(opts.url);
        eventSource.onmessage = x => {
          this.zone.run(() => observer.next(x.data););
          console.log(x.data, '=================>data');
        };
      });
    return observable;

  }
}