Angular 2 Observable emit/error functions are ignored after calling error function once - api

Question

I have a API login service using a http service to perform a login logic (LoginApiService, login-api.service.ts):
login(data: LoginCredentials): Observable<LoginResult> {
let body = JSON.stringify( data );
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(`${this.getBaseUrl()}/login`, body, options)
.map(this.extractData)
.catch(function(error: Response){
return Observable.throw(error); // IF YOU TRY TO LOGIN WITH WRONG CREDENTIALS, AN ERROR WILL BE THROWN
});
}
This service is used in a global service class (authService, auth.service.ts):
login(data: LoginCredentials): void {
this.api.login(data).subscribe(
data => {
this.isLoggedIn = true;
this.group = data.group;
this.Login.emit(new LoginResult(this.group)); // THE CALL OF THIS FUNCTION IS IGNORED IF THE "this.Login.error" FUNCTION HAS BEEN CALLED BEFORE
},
error => {
this.Login.error(error); // THIS IS IGNORED TOO, IF IT WAS CALLED BEFORE
}
);
}
Component (LoginComponent, login.component.ts):
ngOnInit() {
this.LoginSubscription = this.authService
.Login
.subscribe( // THE EVENTS ARE NOT FIRED IF THE ERROR EVENT HAS BEEN FIRED BEFORE ONCE
data => {
if ( this.authService.isLoggedIn ) {
this.router.navigate(['/dashboard']);
}
},
error => {
this.handleError(error);
}
);
}
login() {
this.authService.login( new LoginCredentials(this.user, this.password) );
}
Template (login.component.html):
<div>
<label>User: </label>
<input [(ngModel)]="user" placeholder="user">
</div>
<div>
<label>Password: </label>
<input [(ngModel)]="password" placeholder="password" type="password">
</div>
<p>
<button (click)="login()">Login</button>
</p>
If the error event function of the login observable has been called before, calling the emit and/or error function after this will be ignored.
With correct login credentials, the simulated API responses with HTTP
code 200 and everything works fine
On wrong credentials, the HTTP response is 500
After calling the API again (with correct or wrong credentials), the
events are not fired anymore
This means: If you use wrong login credentials you won't be able to try again without re-loading the page.
Is my idea of using observables wrong?
Why is the event stream hung up after calling the error function
once?
Could someone give me a hint to solve this problem (some kind of
workaround eg.)?

Answer 1

This is happening because you are erroring out your EventEmitter. EventEmitters are basically Observables and when it's Observer calls error or complete, it closes the Obersvable. Closed Observables will stop emitting events by design.
To fix your problem, remove this.Login.error(error); in the LoginComponent. so that you are not closing that EventEmitter. Try replacing that with logic to tell the user that the credentials are wrong or some other message to describe the error.