How to use a NativeScript UI Component plugin designed for vanilla {N}?


So I’m Using NG2 and TS for my app. However I find a lot of modules written in XML and use the “<Page xmlns” syntax which my HTML files don’t like. How can I use modules that use xmlns such as this card-view module?


You will want to import the following in your app.component.ts (root component):

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

Then you can simply use as a standard component in any of your views:

    <Label text="Sweet CardView"></Label>

You can also view a video on how to integrate ui plugins like this here:


Thanks for this @wwwalkerrun I was able to get several plugins to work with this method!
However, a couple of plugins including the Card-View ironically give an error which leads me to believe thatAngular is not able to find the exported class in the node_modules which was installed via npm. I’ve checked to make sure I’m requiring the correct class and it appears that I am. Any thoughts?


      <CardView class="cardStyle" margin="10" elevation="40" radius="5">
           <GridLayout rows="200, auto, auto" columns="auto, auto, *">
               <image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" ></image>
               <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" ></label>  
               <button text="DECLINE" tap="goAway" row="2" col="0" ></button>
               <button text="ACCEPT" row="2" col="1" ></button>


import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { registerElement, ViewClass } from "nativescript-angular/element-registry";
registerElement("CardView", () => require("nativescript-cardview").CardView);


JS:     at DebugAppView.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:28:27)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9354:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9447:48)
JS:     at ViewContainer.detectChangesInNestedViews (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9519:41)
JS:     at DebugAppView.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:41:14)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9354:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9447:48)
JS:     at DebugAppView.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:40:19)
JS: [object Object]
JS: Error: Error in :0:0 caused by: Cannot read property 'nativeElement' of undefined
9:54:10 PM - Compilation complete. Watching for file changes.


If possible to share project, I could take a look, but make sure those npm dependencies are all saved and in your package.json dependencies section.


Also make sure you use tns plugin add command and not just npm install for plugins.


Thanks @wwwalkerrun, @bradwaynemartin,

It turns out all I needed to do was uninstall the npm module, delete the reference in package.json, and reinstall it via tns like you said as well as through npm.

Everything’s working great now!


could you categorize this as ‘solved’ if you are comfortable doing so?