Back Navigation with Capacitor runs Angular outside NgZone on Android

[mjohenneken]

Hello folks, im running into an issue implementing back navigation for an angular application:

Running window.history.back() loads the previous component into the router outlet. However the constuctor of that component and ngOnInit() method runs outside the NgZone (NgZone.isInAngularZone() returns false). This happens only on Android, in Chrome everything works flawlessley. Implementing Zoneless components for the whole application is infeasabile. Rebuilding the window.history function in the application and avoid using window.history.back() seems hacky.

Is this a known issue with Capacitor and Angular? I'd image the ionic team ran into the issue? I searched the docs, and the Internet and found nobody running into a similar issue.

If i recall correctly the Android webview is a bit unique in how it handles URL changes. Is it possible to define custom behaviour for an urlchange via capacitor?

Relevant package.json dependencies:

"dependencies": {
    "@angular/animations": "~13.3.9",
    "@angular/cdk": "~13.3.7",
    "@angular/common": "~13.3.9",
    "@angular/compiler": "~13.3.9",
    "@angular/core": "~13.3.9",
    "@angular/forms": "~13.3.9",
    "@angular/platform-browser-dynamic": "~13.3.9",
    "@angular/platform-browser": "~13.3.9",
    "@angular/router": "~13.3.9",
    "@awesome-cordova-plugins/core": "^5.43.0",
    "@awesome-cordova-plugins/in-app-browser": "^5.43.0",
    "@capacitor/android": "^3.6.0",
    "@capacitor/angular": "^2.0.3",
    "@capacitor/app": "^1.1.1",
    "@capacitor/core": "^3.6.0",
    "@capacitor/ios": "^3.5.1",
    "@capacitor/push-notifications": "^1.0.9",
    ...
  },

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

[mjohenneken]

Sure I'll try to provide a code reproduction in the coming days. As a workaround we reimplemented the window.history function manually for the Android platform.

[mjohenneken]

Capacitor was added to an exiting Angular application following the setup guide.

Here is the reproduction: https://github.com/mjohenneken/capacitor-5933

1. Checkout
2. run npm install
3. Run npm build-mobile-dev
4. Open Android Studio and run the app
5. Click Open B
6. Use hardware button or gesture for back navigation
7. Observe that the in the AComponent constructor NgZone.isAngularZone() returns false and ngOnInit of AComponent is not executed

I noticed the issue has to do with using the InAppBrowser Plugin. When removing dependency cordova-plugin-inappbrowser from package.json angular change detection runs properly.

[jcesarmobile]

Thanks for the sample app, I can reproduce, but I can also reproduce in a Cordova app using a similar code replacing Capacitor back button handing with the equivalent Cordova back button handling (but the back button handling doesn't even seems relevant as default behavior is navigating back anyway and removing the back button code still reproduces the issue of ngOnInit not called), so this looks like a bug on zone.js or in cordova-plugin-inappbrowser. There have been several zone.js conflicts reported between zone.js and cordova plugins as zone.js patches all windows objects/properties and cordova-plugin-inappbrowser also patches window.open, so they probably conflict with each other because of that.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.