Nativescript-angular: RadSideDrawer Showing an error like Cannot Read property 'sideDrawer' of undefined.

[JaganJonnala]

app.component.ts

`import { FireBaseService } from "./services";
import { Component, Injectable, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";

@Injectable()
@Component({
  selector: "main",
  template: "<page-router-outlet></page-router-outlet>",
})
export class AppComponent {
  @ViewChild(RadSideDrawerComponent)
  public drawerComponent: RadSideDrawerComponent;
  public drawer: SideDrawerType;
  public pages: Array<Object>
  constructor(private firebaseService: FireBaseService,
    private _changeDetectionRef: ChangeDetectorRef) {
    this.pages = [
      { name: "Home" },
      { name: "About" },
      { name: "Contact" }
    ];
  }
  ngOnInit() {
    this.firebaseService.initFirebase().then(
      (instance) => {
        this.firebaseService.subscribeNotifications();
        console.log("firebase.init done");
      },
      (error) => {
        console.log("firebase.init error: " + error);
      }
    );
    console.log("Drawer COmoponent is", JSON.stringify(this.drawerComponent));
  }
  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }

  public openDrawer() {
    this.drawer.toggleDrawerState();
  }
}

`

app.component.html

`import { Component, Injectable, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";

@Injectable()
@Component({
  selector: "main",
  template: "<page-router-outlet></page-router-outlet>",
})
export class AppComponent {
  @ViewChild(RadSideDrawerComponent)
  public drawerComponent: RadSideDrawerComponent;
  public drawer: SideDrawerType;
  public pages: Array<Object>
  constructor(private firebaseService: FireBaseService,
    private _changeDetectionRef: ChangeDetectorRef) {
    this.pages = [
      { name: "Home" },
      { name: "About" },
      { name: "Contact" }
    ];
  }

  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }

  public openDrawer() {
    this.drawer.toggleDrawerState();
  }
}

[JaganJonnala]

it showing an error like

[jfmlima]

Could you provide a sample repo to replicate this issue? It will be easier to help you.

[NickIliev]

@JaganJonnala the information is not enough to reproduce you issue but as a starting point you can try to take your drawerComponent reference using Angular ID
e.g

<RadSideDrawer #myDrawer>
<!-- more code follows here -->

and then in your AppComponent use the ViewChild directive with this id to get Element reference

import { Component, ViewChild, ElementRef } from "@angular/core";
...

@ViewChild("myDrawer") drawerComponent: ElementRef;

[gokulraj809040]

try Public drawer: SideDrawerType; into Protected drawer: SideDrawerType; (if you are extending as super class)

[rainymaplesoft]

make sure NativeScriptUISideDrawerModule is imported in your module class
import { NativeScriptUISideDrawerModule, RadSideDrawerComponent, SideDrawerType } from "nativescript-pro-ui/sidedrawer/angular";

[angjnu]

please import following line in your app.module.ts file

import { NativeScriptUISideDrawerModule } from "nativescript-pro-ui/sidedrawer/angular";

and at the same time, you need to write the class name 'NativeScriptUISideDrawerModule' in import section of @NgModule like this:

@NgModule({
bootstrap: [
AppComponent
],
imports: [
...,
NativeScriptUISideDrawerModule, <-----------
...,

],

declarations: [
    AppComponent,
    SideDrawerGettingStartedComponent, <-----------------  Your sideDrawer Class name 
   ... navigatableComponents
],
providers: [        
],
schemas: [
    NO_ERRORS_SCHEMA
]

})

[taibuiSW]

I've tried all of them. None worked

[md-Junaid]

Did anyone solved the issue, I'm getting the same error sidedrawer not defined :( please help
I followed this tutorial http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started

[taibuiSW]

I've solved this issue by deleting the node_modules folder (along with platform, hooks) and "tns run ..." again. It worked :D

[JaganJonnala]

https://github.com/ntrp/nativescript-ng2-drawer-seed

I've Used this .It's working fine.PLease go through with the above link

[westlakem]

@JaganJonnala That is not an acceptable answer for an already in-progress app.

@taibuiSW That worked for me too.. Issue with the post/pre install of the plugin?

[yuukiii]

@taibuiSW that worked for me also. It seems like there needs to be a forced regeneration.

[taibuiSW]

I'm not sure why. Maybe installing new plugin messes things up. This trick not only works with RadSideDrawer but with most unknown issues I got, especially after installing new plugins. It's now my ultimate debugging skill :rofl:

[yuukiii]

I noticed the same thing also - this has come to make me wonder if this should be looked at by NS or get some feedback from NS as to what is the root cause.

[guigulin]

FYI:

https://bradmartin.net/2016/07/20/ahhh-this-nativescript-plugin-doesnt-work/

[dlcole]

I removed and re-added the platform, and that got rid of the problem.

    tns platform remove android
    tns platform add android 

I've found this is a basic approach to handling unexpected errors.

[migscay]

thank you dlcole!

[resquivel24]

@JaganJonnala, I'm new to coding and I'm working on the same issue that you had. You refer us all to a link on GitHub, but since I'm new and don't know what exactly I need to look for, could you please be more specific, for the sake of not going insane here. I'm two steps from breaking my monitor and computer and send coding to hell. Your input will be very much appreciated.

[resquivel24]

@JaganJonnala, never mind, I got @dlcole, advice and it works. Thank you so much @dlcole you're the man!

[digitalhurricane-io]

Removing and re-adding the platform did not work for me.

[prajilshrestha]

Anyone else got any recommendations?

[ismayilov1995]

Delete.
Hooks
platforms
node_modules
package-lock.json
webpack.config.js
then..
npm install
worked for tns preview but still get error when tns run android

[zelwyn]

me too