[Angular 10] RadListView (rc) causing App crash

lonemanotzi commented 4 years ago

To reproduce 1.Start a new project by nsc create sampleapp --template @nativescript/template-hello-world-ng@rc

tns plugin add nativescript-ui-listview@rc

add a RadListView to ItemsComponent as


<ActionBar title="My App">
</ActionBar>


4. add NativeScriptUIListViewModule to app.module
`import { NativeScriptUIListViewModule } from 'nativescript-ui-listview/angular';`
5. tns run android 

**Error:**
System.err: Calling js method onCreateView failed
System.err: Error: JNI Exception occurred (SIGABRT).
System.err: =======
System.err: Check the 'adb logcat' for additional information about the error.
System.err: =======
System.err:
System.err:
System.err: StackTrace:
System.err: updateSelectionBehavior(file: node_modules\nativescript-ui-listview\ui-listview.android.js:1933:0)
System.err:     at createNativeView(file: node_modules\nativescript-ui-listview\ui-listview.android.js:1120:0)
System.err:     at _setupUI(file: node_modules\@nativescript\core\ui\core\view-base\index.js:524:0)
System.err:     at (file: node_modules\@nativescript\core\ui\core\view-base\index.js:566:0)
System.err:     at eachChildView(file: node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err:     at eachChild(file: node_modules\@nativescript\core\ui\core\view\view-common.js:700:0)
System.err:     at _setupUI(file: node_modules\@nativescript\core\ui\core\view-base\index.js:565:0)
System.err:     at (file: node_modules\@nativescript\core\ui\core\view-base\index.js:566:0)
System.err:     at eachChildView(file: node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err:     at eachChild(file: node_modules\@nativescript\core\ui\core\view\view-common.js:700:0)
System.err:     at _setupUI(file: node_modules\@nativescript\core\ui\core\view-base\index.js:565:0)
System.err:     at (file: node_modules\@nativescript\core\ui\core\view-base\index.js:566:0)
System.err:     at eachChildView(file: node_modules\@nativescript\core\ui\content-view\index.js:65:0)
System.err:     at eachChildView(file: node_modules\@nativescript\core\ui\page\page-common.js:99:0)
System.err:     at eachChild(file: node_modules\@nativescript\core\ui\core\view\view-common.js:700:0)
System.err:     at _setupUI(file: node_modules\@nativescript\core\ui\core\view-base\index.js:565:0)
System.err:     at _addViewCore(file: node_modules\@nativescript\core\ui\core\view-base\index.js:428:0)
System.err:     at _addView(file: node_modules\@nativescript\core\ui\core\view-base\index.js:417:0)
System.err:     at onCreateView(file: node_modules\@nativescript\core\ui\frame\index.android.js:738:0)
System.err:     at onCreateView(file: node_modules\@nativescript\core\ui\frame\fragment.android.js:25:0)
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.FragmentClass.onCreateView(FragmentClass.java:55)
System.err:     at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2439)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
System.err:     at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:802)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
System.err:     at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
System.err:     at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
System.err:     at androidx.fragment.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
System.err:     at android.os.Handler.handleCallback(Handler.java:873)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6669)
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)

**Package.json**
`{
  "nativescript": {
    "id": "org.nativescript.sampleapp",
    "tns-ios": {
      "version": "6.5.2"
    },
    "tns-android": {
      "version": "6.5.3"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "clean": "npx rimraf hooks node_modules package-lock.json platforms",
    "ngcc": "ngcc --properties es2015 module main --first-only",
    "postinstall": "npm run ngcc"
  },
  "dependencies": {
    "@angular/animations": "~10.0.0",
    "@angular/common": "~10.0.0",
    "@angular/compiler": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@nativescript/angular": "rc",
    "@nativescript/core": "rc",
    "@nativescript/theme": "~2.3.0",
    "nativescript-ui-listview": "rc",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.5.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~10.0.0",
    "@nativescript/types": "rc",
    "@nativescript/webpack": "rc",
    "@ngtools/webpack": "~10.0.0",
    "typescript": "~3.9.0"
  },
  "readme": "NativeScript Application"
}
`

pekevski commented 4 years ago

@lonemanotzi perhaps running npm run ios | android might lead you to a better outcome due to the --no-hmr flag that it adds.

lonemanotzi commented 4 years ago

it didn't work, same error with --no-hmr flag. Man, this NS upgrade is so bad that every plugin is broken, every component has broken features. this is worse than the angular2 upgrade.

We use quite a few plugins in our App and every single one of them is broken because of the namespace change. Our shared web project is now at ng8 and there is growing pressure to upgrade to ng10.

@NathanWalker: any pointers on how to make the current plugin work with ng10? I see that even plugins that have some of the best NS contributors are still not released an rc version (check nativescript-camera for instance) and your PR is still stuck for almost a month. I tried pulling down the code and locally update the code/dependencies and use the .tgz file in my app. This is giving more errors due to ngcc incompatibility...i am lost...

mohammadrafigh commented 4 years ago

Can you please try to install latest version of nativescript-ui-listview: 9.0.1 which should work with Angular 10.

NathanWalker commented 4 years ago

@lonemanotzi id be happy to help update your project and get you unblocked if you’d like - send email to support@nativescript.org and if can add me as contributor I can submit you a PR

NathanWalker commented 4 years ago

You can also try using the officially published Angular 10 NativeScript template (you can omit the rc on that - we updated the blog post to reflect this as well):

nsc create sampleapp --template @nativescript/template-hello-world-ng

I have a working sample generated from that exact command including a modal component sample as well just for quick reference for anyone if helpful: https://github.com/NathanWalker/ns-angular10-modal-sample

lonemanotzi commented 4 years ago

Thank you @NathanWalker Trying a new sample app using the command provided.

lonemanotzi commented 4 years ago

confirming that latest nsc temaplate and nativescript-ui-listview: 9.0.1 is working for radlist. Thanks @NathanWalker and @mohammadrafigh for tips.

QQ: what is the recommended approach for plugins that are not updated to latest tns version (ie have tns* dependencies)? Is it better to download the source and update the package and use "tns plugin add xxx.tgz" until the plugin owner is releasing a compatible package? I will try to contribute by PR to those plugins, but priority is to get the App updated first.

NathanWalker commented 4 years ago

@lonemanotzi You can custom pack them if in a jam but also please post those which are giving you trouble here as we have updated quite a number of them and are continually doing so everyday. Here's a full list as of right now that have been updated - we will be providing a full list of all those updated at the time of the {N} 7.0 release. As always if one is missed we are happy to help update more plugins. Most of these either have an rc published or official version. For any still in rc, they are safe to use now and a final version will be published as well with the official {N} 7 release at end of month.

@nativescript/firebase Breaking changes: import { firebase } from @nativescript/firebase vs. import * as firebase from @nativescript/firebase
All pro ui suite plugins (autocomplete, calendar, chart, dataform, gauge, listview, sidedrawer)
All @nativescript-community/ui- plugins (there are the Material plugins - previously nativescript-material-)
@nativescript/imagepicker (replaces nativescript-imagepicker)
@nativescript/camera
@nativescript/zip
@nativescript/appversion
@nativescript/appsync
@nstudio/nativescript-pulltorefresh
@nativescript/secure-storage
@nstudio/nativescript-mapbox
@nstudio/root-detection
@nativescript/fingerprint-auth
@nativescript/directions
@nativescript/email
@nstudio/nativescript-https: "~3.0.0" - (https://github.com/EddyVerbruggen/nativescript-https/pull/68/files)
@nstudio/nativescript-cardview

lonemanotzi commented 4 years ago

Thanks @NathanWalker . Possible to look at this nativescript-stripe plugin for Ng10? Your (and NS Team) work is outstanding, keep up the good work.

NathanWalker commented 4 years ago

@lonemanotzi yes definitely that one was on a todo already - I'll post a PR to it today 👍

NathanWalker commented 4 years ago

@lonemanotzi @funder7 here's the PR for nativescript-stripe and angular10: https://github.com/funder7/nativescript-stripe/pull/1

Once that's up on the original repo, we'll publish a version out.

lonemanotzi commented 4 years ago

@NathanWalker I tried this PR in local and found 2 issues

pack.sh gives an error npm run build.native not found. I added this script from one of your plugins and that built the tgz file.
After adding the tgz file through tns plugin, I am getting this error "ERROR in Symbol CreditCardViewDirective declared in c:/temp/x/node_modules/nativescript-stripe/angular/nativescript-stripe.directives.d.ts is not exported from nativescript-stripe/angular (import into c:/temp/x/src/app/app.component.tns.ts)"

Any idea how to fix this.

funder7 commented 4 years ago

Hi @lonemanotzi, can you pull the last version and rebuild the plugin please?

Apart from that, the CreditCardViewModule now must be imported with import { CreditCardViewModule } from 'nativescript-stripe/angular'; otherwise you will get that error.

If you have imported the code from the demo-angular project, then the html markup will probably cause some other errors related to UI events (card element not found). That's a bit strange: if you pull the latest version you will see that the demo-angular project will compile and run without any problems. Those errors are showing only when exporting the sample project code in another application.

A bit of work is still needed, but at least now the plugin seems to work fine ;) Once everything will be fixed, I'll try to find some time to update the documentation too

lonemanotzi commented 4 years ago

I tried the demo-angular project by downloading your PR and it is giving the exact same error. Here is what I did. (I tried a whole bunch of other combinations that are present in package.json but all of them failed)

cd src
npm install
cd publish
pack.sh
cd demo-src
tns plugin add nativescript-stripe....tgz
nsc run android

funder7 commented 4 years ago

Hi @lonemanotzi try to pull the latest version (just pushed it now), I've tested it, it works...but you cannot do any operation if you don't insert Stripe API keys into the code (check stripe.service.ts).

You don't need to run pack.sh when running demo projects, it's required only for publishing the plugin, or testing it into an external project. Probably there are better methods to include the plugin, but I do like that to simulate a real install from the npm repository.

Please pull the latest commit and run:

cd src
npm run clean
cd ../demo-angular
npm run clean
npm run  build.plugin
npm run android

let me know

P.S: maybe it's better to continue this discussion here to don't pollute this topic ;)

NativeScript / nativescript-angular

[Angular 10] RadListView (rc) causing App crash #2217