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

Question

I am struggling with Angular framework to get my application run smoothly, but I can\'t resolve an issue with routing. I have a top level AppComponent and ap

Answer 1

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: `clickable text`
})

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.