title: 'Navigation triggered outside Angular zone' explanation
body: <p>I am working on an Electron app using Angular. I have created an Electron menu item where click() sends an IPC to app.component.ts in order to change the view. The below code works, but I get the following error in DevTools if I call router.navigateByUrl directly:</p>
  
  <pre><code>Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
  </code></pre>
  
  <p>As you can see, I now call router.navigateByUrl through ngZone, solving the problem, but despite reading about NgZone in the docs and searching here and elsewhere, I don't understand what this does or why I need to do it.</p>
  
  <ol>
  <li><p>What's wrong with calling this.router.navigateByUrl directly?</p></li>
  <li><p>Why does it tell me the call is outside the Angular zone, when it is called within app.component.ts?</p></li>
  </ol>
  
  <p>Electron
  <strong>main.js</strong></p>
  
  <pre><code>function sendToAngularRouter(request)
  {
      console.log('sending request');
      win.webContents.send('routeToPage', request);
  }
  </code></pre>
  
  <p>Angular
  <strong>app.component.ts</strong></p>
  
  <pre><code>export class AppComponent implements OnInit {
  
      constructor(public electronService: ElectronService, 
           private router: Router, private zone: NgZone) {}
  
      ngOnInit() {
          this.electronService.ipcRenderer.on('routeToPage', (sender, arg) =&gt; {
            this.navigateTo(arg);
          });
      }
  
      navigateTo(arg: string): void {
          this.zone.run(() =&gt; {
              this.router.navigateByUrl(`/${arg}`);
          });
      }
  }
  </code></pre>
  
  <p>Thank you in advance.</p>