I have a component Angular called login.component who permitted to login at the website with this submit function :
Login.component.ts
submit() {
const loginSubscr = this.authService
.login(this.loginForm.get('username').value, this.loginForm.get('password').value, this.show_site ? this.loginForm.get('site').value : null, !this.show_site ? window.location.href : null)
.pipe(first())
.subscribe((user: UserModel) => {
if (user) {
this.app.alert.success();
// REDIRECTION
this.app.navigation.navigate(null, ['/'], 'page', 'ASIDE');
} else {
this.error = 'Identifiants invalides.';
// this.error = user['errors'].message;
}
});
this.unsubscribe.push(loginSubscr);
}
Before I have no problem for navigate to the home.component but since I have implement observable for get the IP when people connect to the website, this code :
if (user) {
// ALERT
this.app.alert.success();
// REDIRECTION
this.app.navigation.navigate(null, ['/'], 'page', 'ASIDE');
are execute outside ngZone and I have this warning in the console Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
I know i can be encapsuled all this code in ngZone.run()'?
but I like understand why this code are execute outside and if can be fix this bug on the Observable.
I show you the other service who call when i use submit function
Function login
in auth.service
login(email: string, password: string, site: string = null, url: string = null): Observable<UserModel> {
this.isLoadingSubject.next(true);
return this.authHttpService.login(email, password, site, url).pipe(
map((auth: AuthModel) => {
const result = this.setAuthFromLocalStorage(auth);
return result;
}),
switchMap(() => this.getUserByToken()),
catchError((err) => {
console.error('err', err);
return of(undefined);
}),
finalize(() => this.isLoadingSubject.next(false))
);
}
Function login
in auth-http.service
login(username: string, password: string, site: string = null, url: string = null): Observable<any> {
return this.getIp(AuthModel, API_URL + '/login', {username: username, password: password, site_id: site, url: url});
}
Function getIp
in auth-http.service
getIp(model, url, params, options = {}): Observable<any> {
return this.ip_wan$.pipe(
mergeMap(()=> this.ip_lan$),
concatMap(() => {
return this.http.post<{ model }>(url, JSON.stringify(Object.assign({}, params, {
ip_wan: this.ip_wan,
ip_lan: JSON.stringify(this.ip_lan)
})), options);
}),
);
}
If I remove this line in my fucntion getIP : mergeMap(()=> this.ip_lan$),
the code are be execute usually and I don't need to call ngZone.run().
So if someone see where the problem are and if I can fix it please tell me. Thank you