Nativescript: When I press the Back button Application crashes with "Unable to destroy activity {org.nativescript.NsUsage/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onDestroy failed" error

[recev]

Environment

tns info
√ Getting NativeScript components versions information...
√ Component nativescript has 6.7.8 version and is up to date.
√ Component tns-core-modules has 6.5.11 version and is up to date.
‼ Update available for component tns-android. Your current version is 6.5.0 and the latest available version is 6.5.3.
‼ Update available for component tns-ios. Your current version is 6.5.0 and the latest available version is 6.5.2.

package.json

{
  "nativescript": {
    "id": "org.nativescript.FromZero",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "ngcc": "ngcc --properties es2015 module main --first-only",
    "postinstall": "npm run ngcc"
  },
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@nativescript/angular": "~9.0.0",
    "@nativescript/theme": "~2.3.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.5.0",
    "tns-core-modules": "~6.5.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~9.1.0",
    "@ngtools/webpack": "~9.1.0",
    "nativescript-dev-webpack": "~1.5.0",
    "tns-platform-declarations": "~6.5.0",
    "typescript": "~3.8.3"
  },
  "readme": "NativeScript Application"
}

OS: Windows 10
Emulator: Geny Motion Google Pixel 3a Android emulator
Api: 28

Describe the bug

When I run the application in the emulator or my Xiaomi mi 8 phone, it loads without error.
But, when I press the Back button Application crashes with the following error :
"Unable to destroy activity {org.nativescript.NsUsage/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onDestroy failed"

To Reproduce

tns create FromZero
Angular
Hello World
cd FromZero
tns platform add android
tns build android
tns run android --emulator

When the is ready and loaded just press Back button
And it will give the following error.

Project successfully prepared (android)
Installing on device 192.168.137.101:5555...
Successfully installed on device with identifier '192.168.137.101:5555'.
Successfully transferred bundle.js on device 192.168.137.101:5555.
Successfully transferred runtime.js on device 192.168.137.101:5555.
Successfully transferred vendor.js on device 192.168.137.101:5555.
Restarting application on device 192.168.137.101:5555...
Successfully synced application org.nativescript.FromZero on device 192.168.137.101:5555.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to destroy activity {org.nativescript.FromZero/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onDestroy failed
System.err: Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1)
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to destroy activity {org.nativescript.FromZero/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onDestroy failed
System.err: Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1)
System.err:     at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:4459)
System.err:     at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:4477)
System.err:     at android.app.servertransaction.DestroyActivityItem.execute(DestroyActivityItem.java:39)
System.err:     at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:145)System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:70)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1809)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onDestroy failed
System.err: Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.NativeScriptActivity.onDestroy(NativeScriptActivity.java:39)
System.err:     at android.app.Activity.performDestroy(Activity.java:7395)
System.err:     at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1306)
System.err:     at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:4444)
System.err:     ... 11 more

Expected behavior
It should just push the application to the background without any error, just like the other Android applications.

Sample project
I have uploaded this sample project into github
https://github.com/recev/FromZero

Additional context
It's been two months that I've being learning this framework.
I have created more than 10 sample projects and all have the same error.
I used default Android Emulators too. And, it has the same error too.
Other than that, NativeScript was a pleasant experience :)

[NathanaelA]

Thank you for reporting this. I'll checkout your sample app and see if we can duplicate the issue.

[NathanaelA]

I was able to duplicate this -- this is a bug in the angular bindings; and does not occur with the NativeScript Core. I've reassigned this to @NathanWalker since he is in the process of fixing the issues for Angular 10 and NativeScript.

[recev]

Thank you for the fast response :)
Is there any way that we can prevent this bug from happening until the next bugfix release?
I try to showcase the angular nativescript app to my coworkers :)

I was able to duplicate this -- this is a bug in the angular bindings; and does not occur with the NativeScript Core. I've reassigned this to @NathanWalker since he is in the process of fixing the issues for Angular 10 and NativeScript.

[dimitri-bret]

@recev
I think you should wrap your page-router-outlet inside a StackLayout, I encoutered this one, was fixed by doing this:

in your app.component.html:

<StackLayout> 
    <page-router-outlet></page-router-outlet>
</StackLayout>

[recev]

Thank you for the response. I tried and it worked out perfectly. 💯
The thing is, why do we need such a hack?
Lots of people like me are testing this framework as a proof of concept.
Generally, people does not bother to report the issue and just skip it and goes to the react native.
NativeScript is a beautiful framework and has lots of potential.
I hope that the new reorganization will be better 👍
Thanks again 👍

@recev
I think you should wrap your page-router-outlet inside a StackLayout, I encoutered this one, was fixed by doing this:

in your app.component.html:

<StackLayout> 
    <page-router-outlet></page-router-outlet>
</StackLayout>