Using back button and then clicking routerLink results in error

Question

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.

Answer 1

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);
    });
}