2

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

0 Answers0