In a cordova app wrapping an angular app, after I click the back button, it seems that the app is no longer in the "angular zone", so if I click on any routerlink afterwards it do nothing and throw the error Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()
?
Have tried adding "pathMatch: 'full'" to routes.
Also tried the solution here: Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone' and it works, but I would rather not have to write this.ngZone.run(() => this.router.navigateByUrl(''))
on every page. I feel that the routerLink="" syntax is much cleaner.
My button that I clicked looks like this:
<button type="button" class="btn btn-success btn-wide" routerLink="/search-by-keyword">
The code where it breaks is as follows (note all the booleans are true)
navigateByUrl(url, extras = { skipLocationChange: false }) {
if (isDevMode() && this.isNgZoneEnabled && !NgZone.isInAngularZone()) {
this.console.warn(`Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?`);
}
This works fine if I just run it in Angular. But when I run the cordova app wrapping it, it fails. Is this even something I need to worry about since this error only occurs in DevMode?
Thanks in advance.
We encountered the same issue, and ended up creating a "redirect" function in one of the app's services, which wraps the navigation with ngZone, and then passing all our routings through there:
import { Injectable, NgZone } from '@angular/core';
...
constructor(
private ngZone: NgZone,
...
public redirect(routerArray: any) {
this.ngZone.run(() => {
this.router.navigate(routerArray);
});
}