Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone'

It seens a bug, try this as an workaround

constructor(private ngZone: NgZone, private router: Router) {}public navigate(commands: any[]): void {    this.ngZone.run(() => this.router.navigate(commands)).then();}

We had encountered this bug when we were navigating somewhere in our solution.

In our sidebar component we use on-push change detection and we have had one this.ref.detectChanges() when routing occured (change of parameters), which somehow broke routing (possibly kicking parallel running resolvers out of ngZone or something similar).After changing this to the anyway preferred this.ref.markForCheck() this bug didn't appear again.I'm happy we didn't need a workaround, weird behavior though..

Hope this helps anyone having the same issue.

Since there is no accepted answer, and since I found, using Angular 8, the top ranked answer does not quite work, and needs a little more explanation, I have the following to add:

My specific issue was with ag-grid, but I suspect any place where a component is injected, within an *ngFor or otherwise, can potentially cause this problem. This is very close to the previous answer, but instead declares a string parameter into the navigate function and then calls navigateByUrl instead of navigate.

import { Component, NgZone } from '@angular/core';import { Router } from '@angular/router';@Component({  template: `<tag (click)="navigate(path)">clickable text</tag>`})constructor(private ngZone: NgZone, private router: Router) { }public navigate(path: string): void {  this.ngZone.run(() => this.router.navigateByUrl(path)).then();}

Your mileage may vary, but this worked beautifully for me.