Nativescript-ui-feedback: com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer is not a constructor In nativescript-ui-sidedrawer

[AsrarMemon]

When i add nativescript-ui-sidedrawer
and got error which i mention below

System.err: com.tns.NativeScriptException: 
System.err: Calling js method onCreateView failed
System.err: 
System.err: TypeError: com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer is not a constructor
System.err: File: "file:///data/data/org.nativescript.DynamicAccessOTP/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js, line: 103, column: 24
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'RadSideDrawer.initDrawer', ...........

sample code

<RadSideDrawer tkExampleTitle tkToggleNavButton>
        <StackLayout tkDrawerContent class="sideStackLayout">
            <StackLayout class="sideTitleStackLayout">
                <Label text="Navigation Menu"></Label>
            </StackLayout>
            <StackLayout class="sideStackLayout">
                <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Social" class="sideLabel"></Label>
                <Label text="Promotions" class="sideLabel"></Label>
                <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
                <Label text="Important" class="sideLabel"></Label>
                <Label text="Starred" class="sideLabel"></Label>
                <Label text="Sent Mail" class="sideLabel"></Label>
                <Label text="Drafts" class="sideLabel"></Label>
            </StackLayout>
            <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
        </StackLayout>
        <StackLayout tkMainContent>
            <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
            <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
        </StackLayout>
    </RadSideDrawer>

and in .ts

import { Observable } from "tns-core-modules/data/observable";
import frame = require("tns-core-modules/ui/frame");
import { RadSideDrawer } from "nativescript-ui-sidedrawer";

export class GettingStartedViewModel extends Observable {
    constructor() {
        super();
        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.");
    }

    public onOpenDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.showDrawer();
    }

    public onCloseDrawerTap() {
        let sideDrawer: RadSideDrawer = <RadSideDrawer>( frame.topmost().getViewById("sideDrawer"));
        sideDrawer.closeDrawer();
    }
}

can you please help me out how can i solve this issue ?

[alexcoroza]

Why did you closed this issue? Did you find any solution? I'm experiencing this error and I dont know how to fix it. I just followed their documentation

[benjaminhorner]

Same here with a blank new project and following the documentation example (Angular).

[NickIliev]

Hey @AsrarMemon @benjaminhorner @alexcoroza can you guys share some more detailed information as requested in the "new issue" template

Which platform(s) does your issue occur on?

_iOS/Android/Both (if applicable tell us the specific version of the platform)_

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: (e.g. the version of nativescript-ui-sidedrawer in the package.json)
• CLI: (run tns --version to fetch it)
• Cross-platform modules: (the version of tns-core-modules in the package.json)
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json)

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. ...

[benjaminhorner]

@NickIliev : yes. I am building a test project to illustrate the issue. What is the best way to share it with you guys?

[benjaminhorner]

@NickIliev:
OK. So I also updated NS. I had NS 3.4.2 installed and not the latest (ie. 4.0). I noticed the warning about the SideDrawer not being compatible with the current version, but being only a warning and not an error, I discarded it assuming it may still work.

Maybe this should be an error rather than a warning as either it works or it doesn't, in witch case one should either update NS, uninstall the SideDrawer or use a compatible version of it.

Nevertheless, after update, the error persists.

Please provide the following version numbers that your issue occurs with:

Progress NativeScript UI version:

4.0.0

CLI: (run tns --version to fetch it)

4.0.0

Cross-platform modules:

4.0.0

Runtime(s):

iOS: not tested yet
Android: 4.0.0

Please tell us how to recreate the issue in as much detail as possible.

• create a new blank TNS app with angular (tns create sideDrawer --ng)
• cd to project (cd sideDrawer)
• check all is OK (tns run android)
• install nativescript-ui-sidedrawer plugin (tns plugin add nativescript-ui-sidedrawer)
• change app.component.html content to

<RadSideDrawer>
    <GridLayout tkDrawerContent>
        <Label text="Side Menu"></Label>
    </GridLayout>

    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>

• add NativeScriptUISideDrawerModule to app.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { ItemService } from "./item/item.service";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";

// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports  if you need to use the HTTP wrapper
// import { NativeScriptHttpModule } from "nativescript-angular/http";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptUISideDrawerModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

• the application refreshes and produces the following error:

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

TypeError: com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer is not a constructor
File: "file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js, line: 80, column: 24

StackTrace: 
    Frame: function:'RadSideDrawer.initDrawer', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js', line: 80, column: 25
    Frame: function:'RadSideDrawer.createNativeView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js', line: 147, column: 14
    Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 492, column: 35
    Frame: function:'ViewBase._setupAsRootView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 479, column: 14
    Frame: function:'ViewCommon._setupAsRootView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 96, column: 43
    Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 822, column: 22
    Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 665, column: 14
    Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25


    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
    at android.app.ActivityThread.-wrap11(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer is not a constructor
File: "file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js, line: 80, column: 24

StackTrace: 
    Frame: function:'RadSideDrawer.initDrawer', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js', line: 80, column: 25
    Frame: function:'RadSideDrawer.createNativeView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js', line: 147, column: 14
    Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 492, column: 35
    Frame: function:'ViewBase._setupAsRootView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 479, column: 14
    Frame: function:'ViewCommon._setupAsRootView', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 96, column: 43
    Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 822, column: 22
    Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 665, column: 14
    Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.sideDrawer/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25


    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
    at com.tns.Runtime.callJSMethod(Runtime.java:957)
    at com.tns.Runtime.callJSMethod(Runtime.java:941)
    at com.tns.Runtime.callJSMethod(Runtime.java:933)
    at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
    at android.app.Activity.performCreate(Activity.java:6237)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)
    ... 9 more

[NickIliev]

@AsrarMemon thanks for the reported issue. I think the issue is related to this comment.

I've created this test project and indeed was able to reproduce the issue.
However, removing the platform folder and rebuild the application again has resolved the issue on my side.

[benjaminhorner]

@NickIliev : It seems the two issues are related indeed. However, I did have to uninstall and reinstall multiple times the platforms in order to get this to work almost as expected:

Indeed, with the above mentioned code, the side drawer works… but the page-router-outlet doesn't anymore. Where the content should be, there is an empty Page. I think this deserves an new issue though.

NB: I double checked and this is ONLY an issue when using modules and lazy loading.

[NickIliev]

@benjaminhorner you can contact me in the community slack (username: niliev) to investigate the issue with the blank page-router-outlet content. I suspect it is related to a routing issue or layout structure and is not related to this one.

[DimitarTachev]

Most probably related to https://github.com/NativeScript/nativescript-cli/issues/3354.

[nsplugins]

Please use the provided workaround (remove platforms directory) for now. The progress of the issue can be checked in the related one in the NativeScript CLI repository.

[bracco23]

@benjaminhorner @NickIliev I had this same issue and solved with the given workaround, but I am now facing the blank page problem. What is the reason for that? How can I fix it? Thank you.

[benjaminhorner]

@bracco23 have you any code to share? Without any code it will be hard to help you.

[bracco23]

Sure,

<RadSideDrawer>
    <StackLayout tkDrawerContent class="side-drawer">
        <Label text="Option 1"></Label>
        <Label text="Option 2"></Label>
    </StackLayout>
    <page-router-outlet tkMainContent></page-router-outlet>
</RadSideDrawer>
<!-- <page-router-outlet></page-router-outlet> -->

This is the template file for the bootstrapped component, while this below is the template for the first component being rooted

<ActionBar title="Calendar">
    <ActionItem (tap)="selectView" text="view" android.position="popup">
    </ActionItem>
</ActionBar>
<StackLayout>
    <Label text="something"></Label>
</StackLayout>
<!--<RadCalendar></RadCalendar>-->

If I leave only the page-router-outlet, which you can see commented below, I can clearly see the Label in the component, but in this configuration, only the action bar is loaded, not the rest of the layout.

I'm just starting up so nothing interesting in the rest of the project. Modules are laoded properly, with the RadSideDrawer on I can clearly see it. Class for the drawer just adds a green background to allow me to see it better.

[bracco23]

Just an update, it must be something related to my configuration because the same code on a playground session (here: https://play.nativescript.org/?template=play-ng&id=HT6NVH) is working fine on the same phone.

Now I tried cleaning everything and starting as clean as possible, so I did:

    rm -rf node_modules
    npm install
    npm update
    tns platform remove android
    tns platform add android
    tns run android

but the result was still buggy. I also noticed that in my version the SideDrawer doesn't actually cover the ActionBar, as it should according to the documentation of the new version.

For more info, this 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.TrackingCalendar",
        "tns-android": {
            "version": "4.2.0"
        }
    },
    "dependencies": {
        "@angular/animations": "~5.2.0",
        "@angular/common": "~5.2.0",
        "@angular/compiler": "~5.2.0",
        "@angular/core": "~5.2.0",
        "@angular/forms": "~5.2.0",
        "@angular/http": "~5.2.0",
        "@angular/platform-browser": "~5.2.0",
        "@angular/platform-browser-dynamic": "~5.2.0",
        "@angular/router": "~5.2.0",
        "nativescript-angular": "~5.2.0",
        "nativescript-theme-core": "~1.0.4",
        "nativescript-ui-calendar": "^3.9.0",
        "nativescript-ui-sidedrawer": "^4.3.0",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.5.2",
        "tns-core-modules": "^4.2.1",
        "zone.js": "~0.8.2"
    },
    "devDependencies": {
        "babel-traverse": "^6.26.0",
        "babel-types": "^6.26.0",
        "babylon": "6.4.5",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.6.0",
        "typescript": "~2.6.2"
    }
}

[mhlulani]

I was able to resolve the issue just by updating the the platform:

$ tns platform update android

[gggiii]

@mhlulani worked for me too, thanks

[gkumar414]

Run the following command, it is ok..
tns platform update android

[Sunhat]

18 months and still no real solution

[SzaboKrisztian]

This is still an issue. I have tried pretty much all the above suggested solutions, but none works for me, neither in the existing project that I'd like to include it in, nor in a brand new blank project. Library version that I'm using are as follows:

"dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@auth0/angular-jwt": "~5.0.1",
    "@nativescript/angular": "~9.0.0",
    "@nativescript/theme": "~2.3.0",
    "@types/jest": "^26.0.9",
    "nativescript-toast": "^2.0.0",
    "nativescript-ui-sidedrawer": "^9.0.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.5.0",
    "tns-core-modules": "~6.5.0",
    "zone.js": "~0.10.3"
  }