0

I've build a http wrapper which adds some custom headers to all requests. Now I'm trying to implement some sort of preloader and so I want to observe all the requests which are currently active and emit an event if all are done.

The Observable.forkJoin in the constructor is causing an error though:

angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)
ZoneDelegate.invoke @ angular2-polyfills.js:332
Zone.run @ angular2-polyfills.js:227
(anonymous function) @ angular2-polyfills.js:576
ZoneDelegate.invokeTask @ angular2-polyfills.js:365
Zone.runTask @ angular2-polyfills.js:263
drainMicroTaskQueue @ angular2-polyfills.js:482
ZoneTask.invoke @ angular2-polyfills.js:434

Do you guys know why?

Here is my Service:

import {Injectable, EventEmitter} from 'angular2/core';
import {Http, Response, RequestOptionsArgs, Headers} from 'angular2/http';
import {Observable} from 'rxjs/rx';

@Injectable()
export class RtcApiService {
    onLoadingStarted: EventEmitter<any> = new EventEmitter();
    onLoadingFinished: EventEmitter<any> = new EventEmitter();
    isLoading: boolean;
    private observables: Array<Observable<Response>> = new Array();    

    constructor(private _http: Http) {
        Observable.forkJoin(this.observables).subscribe((result) => {
            this.isLoading=false;
            this.onLoadingFinished.emit(null);
        });
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        var observable = this._http.get(url, {
            headers: this.createHeaders()
        });
        this.watchObservable(observable);
        return observable;
    }

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>{
        var observable = this._http.post(url, JSON.stringify(body), {
            headers: this.createHeaders()
        });
        this.watchObservable(observable);
        return observable;
    }

    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>{
        var observable = this._http.put(url, JSON.stringify(body), {
            headers: this.createHeaders()
        });
        this.watchObservable(observable);
        return observable;
    }

    private createHeaders(): Headers{
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('X-Requested-With', 'XMLHttpRequest');
        return headers;
    }

    private watchObservable(observable: Observable<Response>): void{
        this.observables.push(observable);
        if(!this.isLoading){
            this.isLoading = true;
            this.onLoadingStarted.emit(null);            
        }
    }
}

using angular2 beta12

index.html looks like this:

...
<script src="lib/es6-shim.min.js"></script>
<script src="lib/system-polyfills.js"></script>
<script src="lib/shims_for_IE.js"></script>

<script src="lib/angular2-polyfills.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/angular2.dev.js"></script>
<script src="lib/http.dev.js"></script>
<script src="lib/router.dev.js"></script>
....
Christian
  • 51
  • 5
  • Are you including the http bundle in your index.html? And please, don't use EventEmitter in your services. – Eric Martinez Mar 27 '16 at 12:54
  • hi eric. I've added the scripts section to my post. Whats wrong about event emitting services? – Christian Mar 27 '16 at 12:59
  • 1
    I think your problem is that you're importing from `rxjs/rx` (note the lowercase), it should be `rxjs/Rx`. And using EventEmitters in services is a [bad practice](http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter). – Eric Martinez Mar 27 '16 at 13:02
  • omg - you are right. The uppercase R fixed the issue o_O I will read your link. thx for the awesome quick reaction! – Christian Mar 27 '16 at 13:04

0 Answers0