NativeScript - Module 'ui/sidedrawer' introuvable pour l'élément 'Sidedrawer'

Question

Je crée donc un simple menu latéral pour mon application dans NativeScript suivant ce tutorial. Je suis capable de le faire fonctionner pour une seule page donnée en utilisant le code suivant.

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"); 
}; 

Et cela fonctionne tout à fait bien.
Le problème se produit lorsque j'essaie de modulariser et de déplacer le code du tiroir latéral vers un dossier shared afin que je n'ai pas à répéter le code encore et encore dans toutes les pages où j'aurais besoin d'un tiroir latéral.
donc je l'ai fait comme ceci:

Structure du projet:

. 
├── 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> 

partagé/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> 

partagé/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"); 
}; 

C'est l'erreur que je reçois:

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) 

Je suis un débutant complet et suggestions aiderait! Merci.

Answer 1

Dans la section Composants personnalisés dans docs, vous pouvez voir un espace de noms personnalisé ajouté à Page, et c'est ce que vous devez faire.

Sur starting_point.xml ajoutez xmlns:shared="path/to/shared.xml" (avec votre chemin d'accès correct).