title: Angular unit test :WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
body: <p>I am writing unit test for Angular app that deletes account from database. To do this, I click on delete button. Then function is called on .ts file. This will delete the account by calling API.</p>
  
  <p>I want to write unit test to see if this API is called or not using HttpTestingModule,which it does, but in the code after account deleted,I navigate to different page using router.navigate. When code hits it complains WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'</p>
  
  <pre><code>ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'accountsList'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'accountsList'
  Error: Cannot match any routes. URL Segment: 'accountsList'
      at ApplyRedirects.noMatchError (./node_modules/@angular/router/fesm5/router.js?:1455:16)
      at CatchSubscriber.eval [as selector] (./node_modules/@angular/router/fesm5/router.js?:1436:29)
      at CatchSubscriber.error (./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at ThrowIfEmptySubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26), 'Error: Cannot match any routes. URL Segment: 'accountsList'
      at ApplyRedirects.noMatchError (./node_modules/@angular/router/fesm5/router.js?:1455:16)
      at CatchSubscriber.eval [as selector] (./node_modules/@angular/router/fesm5/router.js?:1436:29)
      at CatchSubscriber.error (./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
      at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
      at ThrowIfEmptySubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)'
  </code></pre>
  
  <p>here is what I tried </p>
  
  <p><strong>test.spec.ts</strong></p>
  
  <pre><code> it ('should delete account, if account exist', ()=&gt; {
      let spyOnDelete = spyOn (component,'deleteRecord').and.callThrough();
      fixture.detectChanges();
      component.record.accountid = "Account1";
      fixture.detectChanges();
      let deleteButtonDOM = fixture.debugElement.query(By.css('#deletebtn'));
      console.log(deleteButtonDOM.nativeElement);
      deleteButtonDOM.triggerEventHandler('click',null);
      fixture.detectChanges();
      expect(spyOnDelete).toHaveBeenCalled();  //test passes 
  
      const req = _HttpTestingController.expectOne('/api/accounts/'+component.record.accountid);//test fails
      expect(req.request.method).toBe("DELETE");
      req.flush({status:"SUCCESS"});
      expect(component.consoleMessages.includes("POST: SUCCESS in /api/accounts")).toBe(true);
  
  
  ..what must be written to 
    })
  
  </code></pre>
  
  <p><strong>test.component.ts</strong></p>
  
  <pre><code>  deleteRecord(id) {
      this.spinner.show();
      this.http.delete('/api/accounts/' + id)
      .subscribe(res =&gt; {
          this.spinner.hide();
          if (res['status'] == "FAILURE") {
            this.consoleMessages += "\nPOST: ERROR in /api/accounts\n" + JSON.stringify(res);  
          } else {
            this.consoleMessages += "\nPOST: SUCCESS in /api/accounts\n" + JSON.stringify(res);
            this.router.navigate(['/accountsList']);//this is creating the problem xxxxxxxxxxxxxxxx
          }
        }, (err) =&gt; {
          this.consoleMessages += "\nPOST: ERROR in /api/accounts\n" + JSON.stringify(err); 
          this.spinner.hide();
          console.log(err);
        }
      );
    }
  </code></pre>