Error when using Nativescript's RadSideDrawer

Question

I am trying to add the nativescript-telerik-ui and use the side drawer in a blank project. The project builds properly, but I am getting the error shown below if I try to run the code on a connected device:

The project was running correctly until I tried to use the drawer on one of the pages.

Here is my package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.drawertest",
    "tns-android": {
      "version": "2.4.1"
    }
  },
  "dependencies": {
    "nativescript-telerik-ui": "^1.5.1",
    "nativescript-theme-core": "^0.2.1",
    "tns-core-modules": "2.4.4"
  },
  "devDependencies": {
    "babel-traverse": "6.21.0",
    "babel-types": "6.21.0",
    "babylon": "6.14.1",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*"
  }
}

I also tried running it in Genymotion. Here is the error I am getting there:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.drawertest/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

Error: Building UI from XML. @file:///app/main-page.xml:20:5
 > Module 'ui/rad-side-drawer' not found for element 'RadSideDrawer'.
   > com.tns.NativeScriptException: Failed to find module: "ui/rad-side-drawer", relative to: app/tns_modules/
      com.tns.Module.resolvePathHelper(Module.java:159)
    com.tns.Module.resolvePath(Module.java:60)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1022)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:907)
    com.tns.Runtime.callJSMethod(Runtime.java:895)
    com.tns.Runtime.callJSMethod(Runtime.java:879)
    com.tns.Runtime.callJSMethod(Runtime.java:871)
    com.tns.NativeScriptActivity.onCreate(android.app.Activity.java)
    android.app.Activity.performCreate(

I should probably mention that I getting similar error when I am trying to run the same code on my mac using the ios emulator.

What am I missing?

Thank you.

EDIT: It turns out I had a syntax error. Once corrected, everything worked as expected.

Answer 1

From the error log it looks like you have declared an incorrect namespace for the RadSideDrawer component ("ui/rad-side-drawer"). That component is part of the nativescript-telerik-ui plugin which can be found in the nativescript-telerik-ui-pro/sidedrawer module in the node_modules folder.

For more details you can take a look at the official documentation here.

Simply declare this namespace and use it when declaring the RadSideDrawer in the XML:

xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"