Bootstrapping angular with the global directives

[federico]

Hi, i'm trying to use sidedrawer in my app but i can't even compile because of the directives displayed in the code below:

@Component({
    selector: "my-app",
    directives: [RadSideDrawerComponent, MainTemplateDirective, DrawerTemplateDirective],    
    templateUrl: 'main-page.xml'
}).

I've been reading about the problem and i arrived to the conclusion that it's caused by a wrong bootstrapping in 

nativeScriptBootstrap(AppComponent, [
   provide(PLATFORM_DIRECTIVES, {useValue: ????????????????, multi: true})
 ]);

Then i checked the telerik-ui's official doc and at http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/getting-started says: 

"Using NativeScript UI with Angular 2.0 by bootstrapping with the global directives is done as shown in the snippet below:" but there is no snippet... somebody saw it o can tell me how to do it?

Thanks,

Federico

[Deyan]

Hi Federico,

Thanks for writing.

Indeed, there's a missing snippet in the documentation which has already been addressed:

http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/getting-started

And here's the snippet:

import {SIDEDRAWER_PROVIDERS} from "nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives"; import {LISTVIEW_PROVIDERS} from 'nativescript-telerik-ui-pro/listview/angular/listview-directives'; import {MainComponent} from "./main/main.component"; nativeScriptBootstrap(MainComponent, [LISTVIEW_PROVIDERS, SIDEDRAWER_PROVIDERS]);

Check it out and let us know how it works for you.

Regards,

Deyan
Telerik

[federico]

Excellent!! Now, in my case i'm using de free version, but the "side-draw-directives.ts" is missing into the "node_modules/nativescript-telerik-ui/angular" folder of my project, so 

import {SIDEDRAWER_PROVIDERS} from "nativescript-telerik-ui/sidedrawer/angular/side-drawer-directives";

is not working for me. Is that correct or there's a "side-draw-directives.ts" file missing ?

Thanks in advance,

Federico.

[Vladi]

Hello Federico,

Can you confirm you are using the latest (1.1.1) version of the nativescript-telerik.ui npm package. I tested installing that npm package on a fresh project and the installed modules included the node_modules>nativescript-telerik-ui>sidedrawer>angular>side-drawer-directives.js file.

Note that in the current distribution the TypeScript files are not included but rather only the JavaScript files.

Regards,
Vladi
Telerik

[federico]

Yes, i have  "1.1.1" installed, my dependencies in the package.json are:

"dependencies": {
        "tns-core-modules": "2.0.0",
"angular2": "2.0.0-beta.14",
"nativescript-angular": "0.0.45",
"es6-shim": "^0.35.0",    
"nativescript-telerik-ui": "^1.1.1",
"parse5": "^1.4.2",
"punycode": "^1.3.2",
"querystring": "^0.2.0",
"reflect-metadata": "0.1.2",
"rtts_assert": "^2.0.0-alpha.36",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.27",
"url": "0.10.3",
"zone.js": "0.6.12",
"rx": "^4.1.0"
},

and the error "[ts] Cannot find module 'nativescript-telerik-ui/sidedrawer/angular/side-drawer-directives' ." is at the line 3 of my main.ts, i will keep trying to find out what i'm doing wrong

1.import {nativeScriptBootstrap} from "nativescript-angular/application";
2.import {RadSideDrawer} from "nativescript-telerik-ui/sidedrawer";
3.import {SIDEDRAWER_PROVIDERS} from "nativescript-telerik-ui/sidedrawer/angular/side-drawer-directives";
4.import {AppComponent} from "./app.component";
5.nativeScriptBootstrap(AppComponent, [SIDEDRAWER_PROVIDERS]);

[Michael]

I am also experiencing the same behavior as federico.

[Vladi]

Hi,

It looks like you may be experiencing this issue. We are already working on its solution which will be available in our next release.

If I can be of any further assistance do not hesitate to contact us again.

Regards,
Vladi
Telerik