nativescript angulaire sidedrawer n'apparaissant pas sans erreurs

Question

J'essaie de développer une application en nativescript avec angulaire.
Je veux utiliser le tiroir latéral de telerik-ui comme un panneau de filtrage pour certaines données que je vais afficher dans la zone de texte de contenu principal. Le problème est que je n'ai pas d'erreur quand je lance mon code sauf le fait qu'il n'y a pas de sideDrawer du tout. Je ne sais pas comment le déboguer.
Je suis en train d'essayer d'utiliser cet exemple un peu modifié pour mon application (seuls les noms des fichiers):
http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started

filter.component.html:

<RadSideDrawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page"> 
    <StackLayout tkDrawerContent class="sideStackLayout"> 
     <StackLayout class="sideTitleStackLayout"> 
      <Label text="Navigation Menu"></Label> 
     </StackLayout> 
     <StackLayout class="sideStackLayout"> 
      <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label> 
      <Label text="Social" class="sideLabel"></Label> 
      <Label text="Promotions" class="sideLabel"></Label> 
      <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label> 
      <Label text="Important" class="sideLabel"></Label> 
      <Label text="Starred" class="sideLabel"></Label> 
      <Label text="Sent Mail" class="sideLabel"></Label> 
      <Label text="Drafts" class="sideLabel"></Label> 
     </StackLayout> 
     <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label> 
    </StackLayout> 
    <StackLayout tkMainContent> 
     <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label> 
     <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button> 
    </StackLayout> 
</RadSideDrawer> 

filter.component.ts:

import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core"; 
import { Page } from "ui/page"; 
import { ActionItem } from "ui/action-bar"; 
import { Observable } from "data/observable"; 
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular"; 
import { RadSideDrawer } from 'nativescript-telerik-ui/sidedrawer'; 

@Component({ 
    moduleId: module.id, 
    selector: "tk-sidedrawer-getting-started", 
    templateUrl: 'filter.component.html', 
    styleUrls: ['filter.component.css'] 
}) 
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit { 
    private _mainContentText: string; 

    constructor(private _changeDetectionRef: ChangeDetectorRef) { 
    } 

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; 

    private drawer: RadSideDrawer; 

    ngAfterViewInit() { 
     this.drawer = this.drawerComponent.sideDrawer; 
     this._changeDetectionRef.detectChanges(); 
    } 

    ngOnInit() { 
     this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."; 
    } 

    get mainContentText() { 
     return this._mainContentText; 
    } 

    set mainContentText(value: string) { 
     this._mainContentText = value; 
    } 

    public openDrawer() { 
     this.drawer.showDrawer(); 
    } 

    public onCloseDrawerTap() { 
     this.drawer.closeDrawer(); 
    } 
} 

filter.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedrawer/angular"; 


import { FilterRoutingModule } from "./filter.routing"; 
import { SideDrawerGettingStartedComponent } from "./filter.component"; 

@NgModule({ 
    imports: [ 
     NativeScriptModule, 
     FilterRoutingModule, 
     NativeScriptUISideDrawerModule 
    ], 
    declarations: [ 
     SideDrawerGettingStartedComponent 
    ], 
    schemas: [ 
     NO_ERRORS_SCHEMA 
    ] 
}) 
export class FilterModule { } 

filter.routing.ts:

import { NgModule } from "@angular/core"; 
    import { Routes } from "@angular/router"; 
    import { NativeScriptRouterModule } from "nativescript-angular/router"; 

    import { SideDrawerGettingStartedComponent } from "./filter.component"; 

    const routes: Routes = [ 
     { path: "filter", component: SideDrawerGettingStartedComponent } 
    ]; 

    @NgModule({ 
     imports: [NativeScriptRouterModule.forChild(routes)], 
     exports: [NativeScriptRouterModule] 
    }) 
    export class FilterRoutingModule { } 

filter.component.css:

button { 
    font-size: 15; 
    horizontal-align: center; 
} 

.mainContentText { 
    font-size: 13; 
    padding: 10; 
} 

.mainContentButton { 
    margin: 10; 
    horizontal-align: left; 
} 

.drawerContentButton { 
    color: yellowgreen; 
} 

.sideStackLayout { 
    background-color: gray; 
} 

.sideTitleStackLayout { 
    height: 56; 
    text-align: center; 
    vertical-align: center; 
} 

.sideLabel { 
    padding: 10; 
} 

.sideLightGrayLabel { 
    background-color: lightgray; 
} 

Le tiroir latéral ne semble pas du tout quand je vais à cette page de filtrage. La structure de mon application est similaire à celle-ci: https://github.com/NativeScript/sample-Groceries

Toute aide serait appréciée.

Answer 1

J'ai réussi à résoudre mon problème en ajoutant des dépendances dans mon fichier package.json.
Pour cela, j'ai créé un nouveau projet vide et j'ai installé le RadSideDrawer et j'ai comparé les dépendances que j'avais et mis à jour et ajouté quelques-unes (je n'avais pas @ angular/animations dans ma liste de dépendances par exemple)

Answer 2

obtenez-vous des exemptions? Êtes-vous sûr que votre onglet Bouton fonctionne? Sinon, je obtenu cela fonctionne sur mon projet: J'ai donné le RadSideDrawer un ID

<RadSideDrawer #drawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page"> 

et utilisé le @ViewChild comme ceci:

@ViewChild('drawer') public drawerComponent: RadSideDrawerComponent; 

Laissez-moi savoir si vous avez une solution pour cette .