NativeScript: Android: Crash with "markingMode: none" and "ngFor" with binding

From @jpierront on March 4, 2019 13:47

Environment

• CLI: 5.2.0
• Cross-platform modules: 5.2.2
• Android Runtime: 5.2.1

Describe the bug

• With “markingMode: none”, errors “Attempt to use cleared object reference” occur when I change the background color of an element in my app with a css class name. ([class.element-active]=“…”)
• It doesn’t seems to happen when I change the color or the opacity, only the background-color.
• It doesn’t seems to happen when I use “[style.background-color]=…”
• My app freeze too often without the “markingMode: none”

I don’t know if it’s related to NativeScript or NativeScript-Angular

To Reproduce

• I did not succeed in reproducing it on a blank app, but the garbage collector is probably less often triggered with an empty app.

Do you have any tips to help test this kind of case?

Expected behavior No crash 😉

Sample project

export class MyComponent {
    public activeElement: Element | null = null;
    public elements: Element[] = [...];
}

.element {
    background-color: white;
}
.element-active {
    background-color: red;
}

<Label
    [text]="element.title"
    (tap)="activeElement = element"
    class="element"
    [class.element-active]="element === activeElement"
    *ngFor="let element of elements"
></Label>

Additional context

ERROR Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=4370
    com.tns.Runtime.getJavaObjectByID(Runtime.java:1006)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
    com.tns.Runtime.callJSMethod(Runtime.java:1070)
    com.tns.Runtime.callJSMethod(Runtime.java:1050)
    com.tns.Runtime.callJSMethod(Runtime.java:1042)
    com.tns.gen.java.lang.Object_vendor_177265_32_TouchListenerImpl.onTouch(Object_vendor_177265_32_TouchListenerImpl.java:18)
    android.view.View.dispatchTouchEvent(View.java:11772)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2968)
    android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2657)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2968)
    android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2657)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.j...

ERROR CONTEXT {
  "view": {
    "def": {
      "nodeFlags": 9125889,
      "rootNodeFlags": 1,
      "nodeMatchedQueries": 0,
      "flags": 0,
      "nodes": [
        {
          "nodeIndex": 0,
          "parent": null,
          "renderParent": null,
          "bindingIndex": 0,
          "outputIndex": 0,
          "checkIndex": 0,
          "flags": 1,
          "childFlags": 9125888,
          "directChildFlags": 9125888,
          "childMatchedQueries": 0,
          "matchedQueries": {},
          "matchedQueryIds": 0,
          "references": {},
          "ngContentIndex": null,
          "childCount": 3,
          "bindings": [
            {
              "flags": 8,
              "ns": "",
              "name": "text",
              "nonMinifiedName": "text",
              "securityContext": 0
            },
            {
              "flags": 2,
              "ns": "",
              "name": "element-active",
              "nonMinifiedName": "element-active"
            }
          ],
          "b...

“element-active” is the added css class name containing a change of background-color.

Copied from original issue: NativeScript/NativeScript#6983