[Solved] Getting started fails -

[Narayanan]

Created an APP and added the plugin. What am I missing ? 

Error occurs on simple hello world .

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

[object Object]
File: "/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js, line: 162, column: 20

StackTrace:
    Frame: function:'', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 162, column: 21
    Frame: function:'', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/xml/xml.js', line: 148, column: 13
    Frame: function:'EasySAXParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/js-libs/easysax/easysax.js', line: 751, column: 23
    Frame: function:'XmlParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/xml/xml.js', line: 195, column: 22
    Frame: function:'XmlStringParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 168, column: 27
    Frame: function:'parseInternal', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 43, column: 11
    Frame: function:'loadInternal', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 120, column: 27
    Frame: function:'load', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 104, column: 27
    Frame: function:'pageFromBuilder', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 111, column: 27
    Frame: function:'resolvePageFromEntry', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 89, column: 20
    Frame: function:'Frame.navigate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 165, column: 20
    Frame: function:'ActivityCallbacksImplementation.onCreate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame.js', line: 690, column: 19
    Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/activity.js', line: 12, column: 25


    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
    at android.app.ActivityThread.-wrap12(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:154)
    at android.app.ActivityThread.main(ActivityThread.java:6119)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
Caused by: com.tns.NativeScriptException:
Calling js method onCreate failed

MainPage.xml

<navigation:ExampleDrawerPage xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded"
    navigatedTo="onNavigatedTo"
    xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    xmlns="http://www.nativescript.org/tns.xsd">
    <navigation.actionBar>
        <ActionBar title="Getting started" />
    </navigation.actionBar>

    <dpg:DrawerPage.sideDrawer>
        <drawer:RadSideDrawer id="sideDrawer">
          <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent">
              <StackLayout cssClass="headerContent">
                <Label text="Navigation Menu"/>
              </StackLayout>
              <StackLayout cssClass="drawerMenuContent">
                <Label text="Primary" cssClass="drawerSectionHeader" />
                <Label text="Social" cssClass="drawerSectionItem" />
                <Label text="Promotions" cssClass="drawerSectionItem" />
                <Label text="Labels" cssClass="drawerSectionHeader" />
                <Label text="Important" cssClass="drawerSectionItem" />
                <Label text="Starred" cssClass="drawerSectionItem" />
                <Label text="Sent Mail" cssClass="drawerSectionItem" />
                <Label text="Drafts" cssClass="drawerSectionItem" />
              </StackLayout>
            </StackLayout>
          </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer>
    </dpg:DrawerPage.sideDrawer>

    <StackLayout >
      <Label text="{{ mainContentText }}" textWrap="true" cssClass="drawerContentText"/>
    </StackLayout>
    </navigation:ExampleDrawerPage>

 

main-view-model.js

var observableModule = require("data/observable");
var frame = require("ui/frame");
var drawerModule = require("nativescript-telerik-ui/sidedrawer");

var GettingStartedViewModel = (function (_super) {
    __extends(GettingStartedViewModel, _super);
    function GettingStartedViewModel() {
        _super.call(this);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
    }
    return GettingStartedViewModel;
}(observableModule.Observable));
exports.GettingStartedViewModel = GettingStartedViewModel;

 

main-page.js

var createViewModel = require("./main-view-model").createViewModel;

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

 

[Nick Iliev]

Hello Narayanan,

The sample you are referring to can be found in this sample application and is working as expected with nativeScript 2.3.0. Here is a direct link to the getting started sample itself.
Now, if you are trying to recreate this side drawer example in your application there are reasons which could lead to the described error. 

Notice that in the example the main container is not the common Page but navigation:ExampleDrawerPage.
The sample application is creating this custom page controller here. Without it, you should create your application with the NativeScript module Page in order for the example to work.

However, the error itself suggest that the reason for it might be different.
Are you using the latest version of NativeScript in your project and also the latest version of nativescript--. To make sure that everything in your package.json is expected take a look at this configuration.
You can execute the following command to update your package.json with the proper versions.

tns plugin remove tns-core-modules
tns plugin add tns-core-modules

tns plugin remove tns-core-modules-widgets
tns plugin add tns-core-modules-widgets

tns plugin remove nativescript-telerik-ui
tns plugin add nativescript-telerik-ui

Those commands will remove the currently installed versions and will install the latest stable ones. (respectively 2.3.0 for modules and 1.4.1 for -)

You should also verify that you are using the 2.3.0 versions of the runtime

rm -rf node_modules
rm -rf platforms
tns platform add android
tns run android

At the end, your package.json should look like this 

"nativescript": {
  "id": "org.nativescript.myAppName",
  "tns-android": {
   "version": "2.3.0"
  }
},
"dependencies": {
  "nativescript-telerik-ui": "1.4.1",
  "tns-core-modules": "2.3.0"
}

I hope the described steps will help you sort out your issue. However, if you need additional help do not hesitate to contact us - you can send us your test application with a GitHub link or via archive here so we could easily reproduce your error locally.


Regards,
Nikolay Iliev
Telerik by Progress

[Narayanan]

Hi Nikolay,

Your answer did help me. This is what I did it to work. No one I did not have the navigation folder itself. 

1) Copy the navigation folder under apps. 

2) I have to 
tns install typescript

3) I installed "nativescript-telerik-ui", so corrected "nativescript-telerik-ui-pro" to "nativescript-telerik-ui".

4) I saw this error, since I do not have ios for now. So I commented. the code.

app/navigation/options-menu/options-model.ts(32,65): error TS2304: Cannot find name 'NSIndexPath'.

5) Also saw the app failed at with message saying cannot read property of undefined "title".So I hardcoded. 

  // actionBar.title = this._associatedExampleMeta.title;
    actionBar.title = "Getting started" ;

And now it worked. 

Thanks again.

Narayan