search

nstudio / nativescript-cardview

:diamonds: :clubs: NativeScript widget for Material Design CardView
MIT License
282 stars 51 forks source link

NativeScript Card View plugin support for Apps using Angular 2 #17

Closed Headcult closed 8 years ago

Headcult commented 8 years ago

Would like to see the Card View plugin being supported in NativeScript Apps using Angular 2.

Headcult commented 8 years ago

Yeah!, This is supported now. Here's are the overall steps to get this working with Angular 2:

  1. Add these to your dependencies section in your package.json:

    "nativescript-cardview": "~1.0.1",

  2. Run npm install.

  3. Add the following lines before you bootstrap (nativeScriptBootstrap) your app:

    import {registerElement} from "nativescript-angular/element-registry"; registerElement("CardView", () => require("nativescript-cardview").CardView);

  4. Now, you can use the CardView in your templateURL (HTML files) as you wish like shown below:

    `<CardView #item shadowColor="#FE00FC" elevation="10" margin="10">

    `

  5. If you run into an error like this while running tns run android:

    Exception in thread "main" java.lang.IllegalArgumentException: Class com.tns.internal.AppBuilderCall back conflict: \platforms\android\build\intermediates\classes\debug and \platforms\android\build\intermediates\classes\nativescriptcardview\ debug at com.telerik.metadata.ClassRepo.cacheJarFile(ClassRepo.java:21) at com.telerik.metadata.Builder.build(Builder.java:41) at com.telerik.metadata.Generator.main(Generator.java:44) :buildMetadata FAILED FAILURE: Build failed with an exception. What went wrong: Execution failed for task ':buildMetadata'. Process 'command 'C:\Java\jdk1.8.0_25\bin\java.exe'' finished with non-zero exit value 1

  6. then, do the following:

    Run gradlew clean in the platforms > android folder.

  7. Run tns run android again, it'll fix the issue and you'll see the Card View in your Angular 2 app!
alihbuzaid commented 7 years ago

I am having this error

Could not load view for: CardView.Error: com.tns.NativeScriptException: Failed to find module: "nativescript-cardview", relative to: /app/tns_modules/

@Headcult @NathanWalker

thanks,,,

bradmartin commented 7 years ago

Make sure to run tns plugin add instead of npm install. Do a fresh build of the app. Uninstall old versions from device/emulator then run the new build and of course following the Angular2 registerElement() procedure which I forget if it's outline in the readme. If not it should be in the docs and on the checkbox plugin I believe has a sample. We should add the sample to the readme here if it's not there (on phone or I'd check :) ) hope this info helps.

On Wed, Jan 11, 2017, 7:57 AM Sndan notifications@github.com wrote:

I am having this error

Could not load view for: CardView.Error: com.tns.NativeScriptException: Failed to find module: "nativescript-cardview", relative to: /app/tns_modules/

@Headcult https://github.com/Headcult @NathanWalker https://github.com/NathanWalker

thanks,,,

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradmartin/nativescript-cardview/issues/17#issuecomment-271874615, or mute the thread https://github.com/notifications/unsubscribe-auth/AFulhDKgONOmbXYi53aO5kCQFLzbHKo0ks5rRN_GgaJpZM4IQo1D .

alihbuzaid commented 7 years ago

as you said it is not mentioned in the readme. and I already used tns command but I think what solved it for me is that I unistall the app and removed the platform ...

@bradmartin thank you ....

bradmartin commented 7 years ago

If that was it then the native deps weren't compiled no big deal. Glad it worked. I'll create an issue to doc the README with sample for angular.

laxmisuresh commented 7 years ago

@bradmartin getting below error: JS: ERROR TypeError: Could not load view for: CardView.TypeError: view_1.Property is not a constructor JS: ERROR CONTEXT [object Object] JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR JS: ns-renderer: Could not load view for: CardView.TypeError: view_1.Property is not a constructor JS: JS: TypeError: Could not load view for: CardView.TypeError: view_1.Property is not a constructor JS: at Object.getViewClass (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/nativescript-angular/element-registry.js:28:15) JS: at ViewUtil.createView (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/nativescript-angular/view-util.js:121:44) JS: at NativeScriptRenderer.createElement (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/nativescript-angular/renderer.js:10 3:30) JS: at DebugRenderer2.createElement (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:13139:4 9) JS: at createElement (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:9377:27) JS: at createViewNodes (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:11989:44) JS: at callViewAction (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12401:13) JS: at execComponentViewsAction (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12340:13) JS: at createViewNodes (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12058:5) JS: at createRootView (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:11936:5) JS: at callWithDebugContext (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:13067:42) JS: at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.HelloWorld/files/app/tnsmodules/@angular/core/bundles/c ore.umd.js:12528:12) JS: at ComponentFactory.create (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:9873:46) JS: at ComponentFactoryBoundToModule.create (file:///data/data/org.nativescript.HelloWorld/files/app/tnsmodules/@angular/core/bundles/core.umd.js :3454:29) JS: at ApplicationRef.bootstrap (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:5037:57)

kindly help.

bradmartin commented 7 years ago

@laxmisuresh - I think you have the wrong version installed in your app. Paste your apps package.json here and I can confirm. If you're using NS 3.0+ you can use the latest release. If you're on NS < 3.0 then it needs to be an older release to accomodate for breaking changes with NS 3.0. The installation instructions on the readme should help you install the correct version for your NS version 😄 Hopefully my guess is right 👍

laxmisuresh commented 7 years ago

it is working fine. I have upgraded to latest version. Thanks for your reply.

klever34 commented 6 years ago

can this plugin be used in Nativescript-Vue? And please how?