NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Currently, I am in the process of developing a simple side-drawer menu for my NativeScript application by following this helpful tutorial. I have successfully implemented it on a single page using the given code below.

starting_point.xml: 

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">

    <ActionBar title="Geminid Systems" class="action-bar">
        <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left">
        <sd:RadSideDrawer.drawerContent>
          <StackLayout class="sidedrawer-left">
             <StackLayout class="sidedrawer-header">
               <Label text="Geminid Systems" class="sidedrawer-header-brand" />
             </StackLayout>
             <StackLayout class="sidedrawer-content hamburgerMenu">
               <Label text="Home" class="sidedrawer-list-item-text" />
               <Label text="Accounts" class="sidedrawer-list-item-text" />
               <Label text="Calendar" class="sidedrawer-list-item-text" />
               <Label text="Activity" class="sidedrawer-list-item-text" />
               <Label text="Advanced" class="sidedrawer-list-item-text" />
               <Label text="Online " class="sidedrawer-list-item-text" />
            </StackLayout>
         </StackLayout>

         </sd:RadSideDrawer.drawerContent>

         <sd:RadSideDrawer.mainContent>
            <StackLayout>    
                <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" />

            </StackLayout>
         </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>

</Page>

starting_point.js: 

var drawer;

exports.toggleDrawer = function () {
  drawer.showDrawer();
};
exports.onNavigatedTo = function (args) {
  var page = args.object;
  drawer = page.getViewById("sideDrawer");
};

The setup is working perfectly. However, I wanted to simplify and organize the code by moving the side-drawer functionality into a shared folder named shared to make it reusable across multiple pages without repetition. Here's how I attempted to do it:

Project Structure: 

.
├── app 
|   └── shared
|       └── sidedrawer.xml
|       └── sidedrawer.js
|   ├── app.css
|   ├── app.js
|   ├── starting_point.xml

starting_point.xml: 

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">

    <ActionBar title="Geminid Systems" class="action-bar">
        <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
    </ActionBar>

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left">
        <sd:RadSideDrawer.drawerContent>

               <shared:sidedrawer /> <!-- CHANGE - Moved the content inside RadSideDrawer.drawerContent to shared/sidedrawer.xml for reusability and removed JS code from starting_point.js and put it in shared/sidedrawer.js -->

        </sd:RadSideDrawer.drawerContent>

        <sd:RadSideDrawer.mainContent>
            <StackLayout>    
                <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" />

            </StackLayout>
        </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>
</Page>

shared/sidedrawer.xml 

<StackLayout class="sidedrawer-left">
  <StackLayout class="sidedrawer-header">
    <Label text="Geminid Systems" class="sidedrawer-header-brand" />
  </StackLayout>
  <StackLayout class="sidedrawer-content hamburgerMenu">
    <Label text="Home" class="sidedrawer-list-item-text" />
    <Label text="Accounts" class="sidedrawer-list-item-text" />
    <Label text="Calendar" class="sidedrawer-list-item-text" />
    <Label text="Activity" class="sidedrawer-list-item-text" />
    <Label text="Advanced" class="sidedrawer-list-item-text" />
    <Label text="Online " class="sidedrawer-list-item-text" />
  </StackLayout>
</StackLayout>

shared/sidedrawer.js: 

// no changes - same as the previous starting_point.js
var drawer;

exports.toggleDrawer = function () {
  drawer.showDrawer();
};
exports.onNavigatedTo = function (args) {
  var page = args.object;
  drawer = page.getViewById("sideDrawer");
};

I encountered the following error message : 

System.err: Error: Building UI from XML. @file:///app/views/home/home.xml:9:7
System.err: Module 'ui/sidedrawer' not found for element 'Sidedrawer'.
System.err: com.tns.NativeScriptException: Failed to find module: "ui/sidedrawer", relative to: app/tns_modules/
System.err: com.tns.Module.resolvePathHelper(Module.java:146)

As a beginner, any suggestions or guidance would be highly appreciated! Thank you.

javascriptandroidxmltypescriptnativescript

Answer №1

When exploring the Custom Components section in the documentation, you will notice a custom namespace incorporated into the Page element, which is crucial for your project.

In your starting_point.xml file, make sure to include 

xmlns:shared="path/to/shared.xml"
with the accurate path specific to your setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Returning data to be displayed in Jade templates, leveraging Express and Node.js

Yesterday, I had a question. Instead of using next() and passing an Error object, I decided to figure out what it was doing and replicate it. So now, when someone logs in and it fails, I handle it like this: res.render("pages/home", { ...

javascriptnode.jsexpresspug

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

How can I create a directive that automatically preselects an option if only one item is available in the ngOptions scope? Currently, my code looks like this: <select id="provider" name="provider" class="form-control" ng-model="foo.provider" ...

javascriptangularjsangularjs-directive

What data structure is used to store HTML elements in TypeScript?

Currently, I am dealing with a typescript variable that holds the outcome of a query on the DOM: let games = document.getElementsByTagname("game"); My uncertainty lies in identifying the appropriate type for the resulting array. Should I expect an array ...

typestypescript

Navigating to a different intent within the DialogFlow Messenger fulfillment can be done by utilizing the 'agent.setFollowupEvent(targetIntentEventName)' method

I am currently exploring ways to initiate another DialogFlow Intent (using its event) from a webhook server built with node.js. This will occur after gathering the user's email address, verifying their registration status by sending a POST API request ...

javascriptnode.jsdialogflow-esdialogflow-es-fulfillment

IsContainer and IsModel properties in Dragular are not functioning properly with the accept or canBeAccepted methods

Scenario 1 : Let's consider using two containers, named A (Drag Source) and B (Drop Source). Code snippet : dragularService(containerLeft, { containersModel: [DragularconTainer], copy: true, canBeAccepted: function(el, source) { ...

javascriptjquerydragular

Exploration of mapping in Angular using the HttpClient's post

After much consideration, I decided to update some outdated Angular Http code to use HttpClient. The app used to rely on Promise-based code, which has now been mostly removed. Here's a snippet of my old Promise function: public getUser(profileId: nu ...

angulartypescriptangular-httpclient

Include a fresh attribute in the Interface

How can I include a boolean property isPhotoSelected: boolean = false; in an API interface that I cannot modify? The current interface looks like this: export interface LibraryItem { id: string; photoURL: string; thumbnailURL: string; fi ...

javascriptangulartypescriptionic3

Ways to Manage modals responses as services in AngularJS

I am a beginner in the world of JavaScript and AngularJS. I am fascinated by some of the concepts within JS, like trying to create a modal service using the example I found online. I am eager to delve deeper into what exactly is happening under the hood, e ...

javascriptangularjsbootstrap-modalangular-services

Executing file upload in parent component with Angular 2

Is there a way to initiate a file upload from the parent component of the router? Specifically, I need to execute two functions located in the parent component - openFileSelect and uploadSelectedFile to manage the <input type="file"> element. This i ...

javascriptangularangular2-routing

What is the best way to incorporate async and await into my functions within a Node.js environment?

I attempted to implement asynchronous functionality into my code, however, I encountered some difficulties. What steps should I take next? Below are the functions in question: 1. router.post('/urls', (req, response) => { count = 2; webUrl ...

javascriptnode.jsasync-await

Issue with displaying nested React Elements from Component

I am currently facing an issue with my Collection component, which is utilizing a sub-component called RenderCollectionPieces to display UI elements. Strangely, I am able to see the data for image.name in the console but for some reason, the UI elements ar ...

javascriptreactjsmaterial-ui

Tips for incorporating confidence intervals into a line graph using (React) ApexCharts

How can I utilize React-ApexCharts to produce a mean line with a shaded region to visually represent the uncertainty of an estimate, such as quantiles or confidence intervals? I am looking to achieve a result similar to: ...

javascriptreactjstypescriptconfidence-intervalapexcharts

Having trouble with implementing the .addclass function in a dice roller project

I'm looking to have the element with id=die load initially, and then on a button click event labeled "click me," apply the corresponding CSS class such as 'die1,' 'die2,' and so forth. function roll() { var die = Math.floor(Ma ...

javascriptjqueryhtmlcss

Attempting to create a school project involving pizza, but encountering some technical difficulties

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>pizza ...

javascriptforms

Guide on creating a nested commenting platform with express.js

My goal is to set up a system for displaying multi-level comments, where a comment can have replies, which in turn can also have replies, and so on. Currently, I am using SQLite for this purpose. Below is the approach I have taken so far: Model const Comme ...

javascriptnode.jsexpresssqlitesequelize.js

How do I redirect with a GET method after calling the *delete* method in Node / Express server?

As someone new to AJAX and Node, I encountered a dilemma that I hope to get some guidance on. Here's the issue: I have a DELETE ajax call that removes a row from the database and I want to redirect back to the same route with a GET method afterwards. ...

javascriptajaxnode.jsexpress

Angular - Monitoring Changes in Variables

I've recently started working with Angular, primarily using VueJS. I'm curious about how to detect when a variable is updated. In my case, the variable is being updated through a DataService. I came across ngOnChanges(), but it seems that it only ...

angulartypescript

Simplify your bootstrap Input field code by utilizing components or a similar method in Vue.js

Using a single file component with a pug template, I am faced with multiple input fields that have the same formatting. Here is an example: .input-group.input-group-sm .input-group-addon Purchase Price input.form-control(v-model='purchase_ ...

javascripttwitter-bootstrap-3vue.jsvuejs2

Creating a classification for a higher order function

In the code snippet below, I have a controller that acts as a higher order method: const CourseController = { createCourse: ({ CourseService }) => async (httpRequest) => { const course = await CourseService.doCreateCourse(httpRequest. ...

javascriptjsdoc

Explore nested arrays and retrieve objects that have corresponding categories

Working with react+ nextJS and fetching static objects, specifically "posts". The aim is to develop a "related posts" feature for each post that retrieves three posts containing at least one of the categories. Below is an excerpt simplified for clarity: co ...

javascriptarraysreactjsnext.js