{NativeScript} SideDrawer error "Module 'ui/drawer-content' not found for element 'DrawerContent'"
<p>NativeScript beginner, I have been searching all over the web but since there seemed to have many iterations/changed in the base code over the last months, the examples I found on the web were pretty inconsistent.</p>

<p>So here goes, I am trying to implement a simple SideDrawer from "nativescript-telerik-ui/sidedrawer" but fail miserably.</p>

<p>Several points to note:</p>

<ul>
<li>in the <em>main-page.ts</em> file, I can not seem to access the "id" attribute of the sidedrawer (always return undefined)</li>
<li>on run (on Android, did not try iOS yet), I got the following error: "Module 'ui/drawer-content' not found for element 'DrawerContent'"</li>
</ul>

<p>Below are my files+code:</p>

<p><strong>package.json</strong></p>

<pre><code>{
    "nativescript": {
        "id": "org.nativescript.githubreader",
        "tns-ios": {
            "version": "1.7.0"
        },
        "tns-android": {
            "version": "1.7.1"
        }
    },
    "dependencies": {
        "github-api": "^0.11.2",
        "lodash": "^4.10.0",
        "nativescript-telerik-ui": "^1.0.1",
        "tns-core-modules": "1.7.1"
    },
    "devDependencies": {
        "nativescript-dev-typescript": "^0.3.0",
        "typescript": "^1.8.9"
    }
}
</code></pre>

<p><strong>main-page.xml</strong></p>

<pre><code>&lt;Page xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    loaded="loaded" 
    navigatingTo="navigatingTo"&gt;

    &lt;drawer:rad-side-drawer id="sideDrawer"&gt;
        &lt;drawer:rad-side-drawer.mainContent&gt;

        &lt;!-- Home page contents --&gt;
        &lt;stack-layout&gt;
            &lt;image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="" height="100" margin="20 0 0 0" /&gt;
            &lt;label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" /&gt;
        &lt;/stack-layout&gt;

        &lt;/drawer:rad-side-drawer.mainContent&gt;
        &lt;drawer:rad-side-drawer.drawerContent&gt;
            &lt;widgets:drawer-content /&gt;
        &lt;/drawer:rad-side-drawer.drawerContent&gt;
    &lt;/drawer:rad-side-drawer&gt;

    &lt;StackLayout orientation="vertical"&gt;
        &lt;Label text="{{ message }}" class="message" textWrap="true"/&gt;
    &lt;/StackLayout&gt;
&lt;/Page&gt;
</code></pre>

<p><strong>main-page.ts</strong></p>

<pre><code>import { EventData } from "data/observable";
import { Page } from "ui/page";
import { MainModel } from "../../models/main-view";

let drawer:any;

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    const page = &lt;Page&gt;args.object;
    page.bindingContext = new MainModel();
    drawer = page.getViewById("sideDrawer");
    console.log("navigatingTo");
    console.log(drawer);
}

export function loaded(args: EventData) {
    const page = &lt;Page&gt;args.object;
    drawer = page.getViewById("sideDrawer");
    console.log("Loaded");
    console.log(drawer);
};

export function toggleDrawer() {
    if(drawer) {
        drawer.toggleDrawerState();
    }
}
</code></pre>

<p>I am really stuck there and would really appreciate the help of some more experienced people on the matter.</p>

<p>NativeScript looks awesome and really looking forward to manage to build something good with it. </p>

<p>Looking forward to read some answers, thanks for reading so far  :)</p>