Angular 2 Http Post sends two ajax calls instead of one

Question

Hi I am trying to wrap my head around the observable pattern implementation of angular and I seem to be having some sort of issues.Here is my code:

 import 'rxjs/Rx';
import {Injectable, EventEmitter} from 'angular2/core';
import {Http, Response, RequestOptions, Headers, URLSearchParams} from 'angular2/http';
import {Observable} from 'rxjs/Observable'
import {GuidService} from './guid.service';

@Injectable()
export class HttpService {
    private http: Http;
    private guidService: GuidService;
    public ajaxStarted: EventEmitter<string> = new EventEmitter();
    public ajaxCompleted: EventEmitter<string> = new EventEmitter(); 

    constructor(http: Http, guidService: GuidService) {
        this.http = http;
        this.guidService = guidService;
    }

    public post(url: string, model: any): Observable<Response> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        //Create unique id for each ajax call
        let httpCallId = this.guidService.new();

        //Let Loading Box components that an ajax call has been triggered
        this.ajaxStarted.emit(httpCallId);

        let httpPost = this.http.post(url, JSON.stringify(model), options);

        //Let Loadinc Box Component know that ajax call has been completed
        httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId));

        return httpPost;
    }

}

And this is my code that gets called on form submit:

@Component({
    selector: 'register',
    templateUrl: './app/account/components/register.view.html',
    directives: [ROUTER_DIRECTIVES]
})
export class RegisterComponent {
    private accountDataService: AccountDataService

    public registerViewModel: AccountViewModel.UserRegistrationViewModel;

    constructor(accountDataService: AccountDataService) {
        this.accountDataService = accountDataService;
        this.registerViewModel = <AccountViewModel.UserRegistrationViewModel>{};
    }

    public register() {
        this.accountDataService.register(this.registerViewModel).subscribe(x => {
            console.log(x);
        })
    }
}     

<form (ngSubmit)="register()" #userRegistrationForm="ngForm">
            <div class="form-group">
                <input class="form-control" 
                       type="email" 
                       placeholder="Email Address"
                       [(ngModel)]="registerViewModel.userName" />
            </div>
            <div class="form-group">
                <input class="form-control" 
                       type="password" 
                       placeholder="Password"
                       [(ngModel)]="registerViewModel.password" />
            </div>
            <div class="form-group">
                <input class="form-control" 
                       type="password" 
                       placeholder="Password Confirmation"
                       [(ngModel)]="registerViewModel.confirmPassword" />
            </div>
            <div class="form-group">
                <button type="submit" 
                        class="btn btn-fluid btn-primary"
                        [disabled]="!userRegistrationForm.form.valid">Register</button>
            </div>
        </form>

Now my problem is that when I click the submit button instead of one ajax calls to get sent to the server.I have checked this by putting a brakepoint on the server and two calls arive.

The register function gets called only oance on button clicked.

I have noticed that my problem is this line:

  httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId));

If I comment it only one ajax call gets sent to the server.

The way that I understand observables is that each subscribe gets triggered when ever the observable value changes.

What am I doing wrong here?

UPDATE:

The issue apparently replicates also in the get calls. All the get calls in my app call ths function:

public get(url: string, model: any = {}): Observable<Response> {
    let httpCallId = this.guidService.new();

    this.ajaxStarted.emit(httpCallId);

    let httpGet = this.http.get(url, new RequestOptions({
        headers: this.getHttpHeaders(),
        search: this.createURLSearchParams(model)
    }));

    httpGet.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId));

    return httpGet;
}

Answer 1

I guess that you subscribe twice to your POST observable because you subscribe once within the post method of the HttpService and return it. You probably subscribe again on this returned observable in another part of your application:

public post(url: string, model: any): Observable<Response> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    //Create unique id for each ajax call
    let httpCallId = this.guidService.new();

    //Let Loading Box components that an ajax call has been triggered
    this.ajaxStarted.emit(httpCallId);

    let httpPost = this.http.post(url, JSON.stringify(model), options);

    //Let Loadinc Box Component know that ajax call has been completed
    httpPost.subscribe(success => { // <-------
        this.ajaxCompleted.emit(httpCallId);
    }, error => {
       this.ajaxCompleted.emit(httpCallId);
    });

    return httpPost;
}

Since observables are cold by default, the corresponding request will be executed twice (if subscribed twice).