I am developing small project for testing with Angular 2 and I got object unsubscribed error while logging in.
Here is my LoginComponent:
import {Component, OnDestroy} from '@angular/core';
import {Router} from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import {Location} from '@angular/common';
import {AuthService} from './services/auth.service';
import {RoutingService} from './services/routing.service';
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';
import {LoadingBarModule, LoadingBarService} from 'ng2-loading-bar';
@Component({
selector: 'login',
template: `
<loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar>
<h3> {{'LOGIN' | translate }} </h3>
<p> {{Message}} </p>
<div *ngIf="!authService.isLoggedIn">
<input [(ngModel)]="username" placeholder="{{'USERNAME' | translate}}" /><br />
<input type="password" [(ngModel)]="password" placeholder="{{'PASSWORD' | translate}}" />
</div>
<div>
<button (click)="login()" *ngIf="!authService.isLoggedIn">{{'LOGIN' | translate }}</button>
</div>
<label class="label label-danger">{{errorMessage}}</label>
<ng2-toasty [position]="'top-center'"></ng2-toasty>
`
})
export class LoginComponent implements OnDestroy {
username: string;
password: string;
subscription: Subscription;
constructor(private authService: AuthService, private router: Router, private toastyService: ToastyService, private toastyConfig: ToastyConfig, private loadingBarService: LoadingBarService, private routingService: RoutingService, private location:Location) {
this.toastyConfig.theme = 'material';
}
login() {
this.loadingBarService.start();
this.subscription = this.authService.login(this.username, this.password).subscribe(() => {
if (this.authService.isLoggedIn) {
this.toastyService.default('Hi');
this.routingService.logged = false;
let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : this.routingService.lang + '/apphomecomponent';
this.router.navigate([redirect]);
}
else {
this.toastyService.default('Login failed');
}
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
And here is my AuthService:
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';
@Injectable()
export class AuthService {
isLoggedIn: boolean = false;
redirectUrl: string;
login(username: string, password: string): Observable<boolean> {
if (username === 'test' && password === 'test') {
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
}
else {
return Observable.of(false).delay(1000).do(val => this.isLoggedIn = false);
}
}
logout(): void {
this.isLoggedIn = false;
}
}
When I log in first time, it works fine. but when I logout and trying to log in again, it gives me errors:
I had a similar issue and "solved" it by replacing the *ngIf with [hidden].
This solution does not remove the element from the dom, which is probably what is causing the unsubscribing issue, it merely hides the element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With