Trouble Implementing SideDrawer

[Kelly]

Hello,

I'm working to add the RadSideDrawer component to my NativeScript+Angular application. I have found the example project online and have copied verbatim the sidedrawer/getting-started page. I'm getting an error on this bit of code "this.drawer = this.drawerComponent.sideDrawer;" saying the following "TypeError: undefined is not an object (evaluating 'this.drawerComponent.sideDrawer')". I'm not really sure what I'm doing wrong as I'm sure the ui framework is working since other components I'm using still work like the RadDataForm. 

Here is the meat of my package json. 

 

"dependencies": {
"@angular/animations": "~4.1.2",
"@angular/common": "~4.1.2",
"@angular/compiler": "~4.1.2",
"@angular/core": "~4.1.2",
"@angular/forms": "~4.1.2",
"@angular/http": "~4.1.2",
"@angular/platform-browser": "~4.1.2",
"@angular/platform-browser-dynamic": "~4.1.2",
"@angular/router": "~4.1.2",
"nativescript-angular": "~3.0.0",
"nativescript-camera": "^3.0.0",
"nativescript-floatingactionbutton": "^3.0.0",
"nativescript-geolocation": "^3.0.0",
"nativescript-google-maps-sdk": "^2.0.3",
"nativescript-plugin-firebase": "^3.11.4",
"nativescript-telerik-ui-pro": "file:///Users/donmatthews/Documents/Telerik/nativescript-ui-pro.tgz",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.10",
"rxjs": "~5.3.1",
"tns-core-modules": "^3.0.0",
"zone.js": "~0.8.10"
},
"devDependencies": {
"@angular/compiler-cli": "~4.1.2",
"@ngtools/webpack": "1.3.1",
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.17.1",
"copy-webpack-plugin": "~4.0.1",
"extract-text-webpack-plugin": "~2.1.0",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-typescript": "~0.4.0",
"nativescript-dev-webpack": "^0.5.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.0.2",
"typescript": "~2.2.1",
"webpack": "~2.5.1",
"webpack-sources": "~0.2.3"
},

 

outside of that the code Im using is exactly as what can be found here.

 

Some help would be awesome.

[Kelly]

One other thing to note is that my app structure is pretty different, in that my implementation of the getting-started sits behind its own module. So instead of being part of EXAMPLE_COMPONENTS and being declared in app.module it is declared its own local module and that is then imported into app.module. Hope that helps narrow things down. 

[Nick Iliev]

Hello Kelly Hill,

To provide you with the most appropriate advice the best scenario would be to send us a sample application that demonstrates your case with the exact code you are using.

Meanwhile, I have some suggestions that might help you overcome this issue and to demonstrate the steps needed to enable the side drawer I have made a very basic Angular project which implements the gettings started experience from the example. The application can be found here, and you can use as a reference to discover the differences that might cause your undefined error.  Here are some of the steps you will need to verify at your end as well:

- Verify that you have imported NativeScriptUISideDrawerModule as done here. Documentation article explaining this imports can be fond here. If you are using lazy loading or different kind of modules loading then make sure you have this import in the respective NgModule.
- Make sure you are using the right version of nativescript-telerik-ui-pro plugin. In your package.json the version is not clear as there is a reference to the tgz file. However NativeScript 3.x.x is not backwards compatible with nativeScript 2.5.x so you will need explicitly nativescript-telerik-ui-pro versions 2.0.1 for NativeScript 3.x.x

All this is done in my test application which is successfully starting the side drawer in the getting started example. If you still experience troubles please send us sample application (remove node_modules and platforms folders and do not send the TGZ file of the plugin) and let us know which version of nativescript-telerik-ui-pro is used in your project.

Regards,
Nikolay Iliev
Telerik by Progress

[Kelly]

Thanks, I have resolved the issue. I needed to import NativeScriptUISideDrawerModule into the ngModule containing the page i wanted it to be on. Marking as answered.