Bug Report

This issue can interest also https://github.com/ionic-team/ionic

Capacitor Version

Capacitor 1.x and 2.x

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

Angular application (with or whithout Ionic Angular) is broken by the "cordova.js" injected in head scripts of index.html. This can create several problem as described in the following issue from the Angular repository.
See: angular/angular#22509

In my case, when I'm in a several "router-oulet" deep and hit the back button, the previous child component will be created but not rendered correctly (no life cycle hooks are called like ngOnInit).

Expected Behavior

In my case, the previous child should be created and rendered correctly (life cycle hooks should be called).

Sample Code or Sample Application Repo

https://github.com/AlanRaz/capacitor-angular-issue

Reproduction Steps

npm i && npm run build && npx cap sync android && npx cap open android

Follow the navigation button (in green) then when you arrive to the step 2, just hit the back button (in red).
You can see that the component are no more rendered correctly and see in the console log that the constructor is called but the ngOnInit are not called.

Other Technical Details

This is also a problem with older Angular versions.
See: angular/angular#22509

Other Information

It took me a while to found this issue because I didn't know that Capacitor added the cordova.js at run time in the header of the index.html.

What we use to do in old Cordova/Angular app to resolve this was to follow (https://github.com/angular/angular/blob/master/packages/zone.js/NON-STANDARD-APIS.md#others) and put the scripts in this order:

<script src="zone.js"></script>
<script src="cordova.js"></script>
<script src="zone-patch-cordova.js"></script>

I don't know witch solutions will be good in termes of design and maintainability.

• Let, the user to add a workaround like this one in the head of index.html:

<script>
  window.addEventListener = function () {
    (window.EventTarget || Window).prototype.addEventListener.apply(this, arguments);
  };
  window.removeEventListener = function () {
    (window.EventTarget || Window).prototype.removeEventListener.apply(this, arguments);
  };
  document.addEventListener = function () {
    (window.EventTarget || Document).prototype.addEventListener.apply(this, arguments);
  };
  document.removeEventListener = function () {
    (window.EventTarget || Document).prototype.removeEventListener.apply(this, arguments);
  };
</script>

But, I think it's really not explicit for the end-user.

• Capacitor should inject directly this workaround before injecting cordova.js.
  I don't know if this workaround can have side effect on other web libraries (or other libraries to have the same problem).