[RadListView] Breaking Change since version 10.2.x

[ishiharas]

I'm using the following dependencies:

"@nativescript/core": "^8.1.5",
"@angular/core": "^12.2.6",
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.2.3",

I rebuild a customers project and every subpage containing a RadListView crashed with the following error message:

An uncaught Exception occurred on "main" thread. Calling js method onCreateViewHolder failed TypeError: componentFactory.create is not a function

StackTrace: createComponent(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:70910:47) at detachedLoaderFactory(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:235722:33) at (file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:236031:37) at invoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219616:26) at onInvoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:76411:33) at invoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219615:52) at run(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219378:43) at run(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:76265:28) at getOrCreate(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:236028:29) at (file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:235666:52) at invoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219616:26) at onInvoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:76411:33) at invoke(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219615:52) at run(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:219378:43) at run(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:76265:28) at (file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:235661:33) at getViewForViewType(file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:194509:28) at (file:///data/data/com.deleted_name.deleted_name/files/app/vendor.js:195173:26) at com.tns.Runtime.callJSMethodNative(Na

The following lines were enough to trigger the crash Template file:

    <RadListView class="m-x-5" [items]="debugarr">
        <ng-template tkListItemTemplate let-item="item" let-i="index">
            <Label [text]="item.title"></Label>
        </ng-template>
    </RadListView>

example.ts

    public debugarr: ObservableArray<Partners> = new ObservableArray([
        {title: "test"},
    ]);

Current fix: Rebuilding the whole project with setting the nativescript-ui-listview version in package.json to version 10.1.1

1. "nativescript-ui-listview": "10.1.1",
2. ns clean && npm i

[arLevi]

I'm also receiving an error after creating a new project and running tns plugin add nativescript-ui-listview:

Restarting application on device 94f27245...
  System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
  System.err: Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  System.err:   - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  System.err:   - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  System.err:   - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
  System.err: File: (file: src/webpack:/MyProject/webpack/bootstrap:27:0)

I also have constant WARN from NPM:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@ngtools/webpack@12.0.5',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.0', npm: '8.7.0' }
npm WARN EBADENGINE }

Versions

"dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@nativescript/angular": "~12.0.0",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-insomnia": "^2.0.0",
    "nativescript-texttospeech": "^3.0.1",
    "nativescript-ui-listview": "^15.2.3",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~12.0.0",
    "@nativescript/android": "8.5.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~12.0.0",
    "@types/lodash": "^4.14.191",
    "typescript": "~4.2.0"
  },

For me the following "nativescript-ui-listview": "10.1.1" and ns clean && npm i didn't work.

I can also confirm that it doesn't work out of the box after trying:

$ tns update
  - @nativescript/core has been updated to ~8.5.3
  - @nativescript/webpack has been updated to ~5.0.14
  - @nativescript/types has been updated to ~8.5.0

Still same error instroduced only by adding:

# File: app.module.ts
# Compile fine
import { NativeScriptUIListViewModule } from 'nativescript-ui-listview/angular';

# When adding to the imports - crash
@NgModule({
  ...
   imports:[
     ...
     NativeScriptUIListViewModule,
     ...
   ]
  ...
})