Angular Observable make navigation outside NgZone

Question

I got a problem with an observable and navigation. Here is my login function:

submit() {
const loginSubscr = this.authService
  .login(this.loginForm.get('username').value, this.loginForm.get('password').value)
  .pipe(first())
  .subscribe((user: UserModel) => {
    if (user) {
      // REDIRECTION
      this.app.navigation.navigate(null, ['/'], 'page', 'ASIDE');
    }
  });}

And my login function:

login(username: string, password: string): Observable<any> {
return this.getIp(AuthModel, API_URL + '/login', {username: username, password: password});}

Associate with my IP function:

getIp(model, url, params, options = {}): Observable<any> {
return this.init$.pipe(
    concatMap(() => { return this.init_need_ip ? this.ip_wan$ : of({}) }),
    mergeMap(() => { return this.init_need_ip ? this.ip_lan$ : of({}) }),
    concatMap(() => {
      return this.http.post<{model}>(url, JSON.stringify({...params, ip_wan: this.ip_wan, ip_lan: JSON.stringify(this.ip_lan)}), options);
    }),
);}

And my Observable which make the problem:

// IP LAN
this.ip_lan$ = new Observable(observer => {
  this.ip_lan = [];
  if (window.RTCPeerConnection) {
    console.log('ON VA CHERCHER L\'IP');

    const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
    var myPeerConnection = window.RTCPeerConnection;
    var pc = new myPeerConnection({iceServers:[]})
    var noop = function(){};

    pc.createDataChannel('');
    pc.createOffer().then(function(sdp) {
      pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
      // An error occurred, so handle the failure to connect
    });

    // listen for candidate events
    pc.onicecandidate = function(ice) {
      if (ice && ice.candidate && ice.candidate.candidate && ice.candidate.candidate.match(ipRegex)) {
        ice.candidate.candidate.match(ipRegex).forEach(ip => {
          if (!this.ip_lan.includes(ip)) {
            this.ip_lan.push(ip);
          }
        });
      }
      this.completeObservable(observer);
    }.bind(this);

  } else {
    this.completeObservable(observer);
  }
});}

completeObservable(observer) {
observer.next();
observer.complete();}

In fact, when I log, navigation is very very long and animation of another component stops. But if I click, it is more fast and I have the animation step depending the time between my click. Sorry, it's difficult to explain... I got this warning in the console:

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

If I comment this line

mergeMap(() => { return this.init_need_ip ? this.ip_lan$ : of({}) }),

it works well. Any idea ?