RadSlideDrawer: undefined is not an object (evaluating 'b.prototype')

From @cerealexx on November 6, 2018 10:38

I've installed the slidedrawer plugin but when navigating to the route that uses it, the view isn't rendered and an error is returned instead:

file:///app/tns_modules/@angular/core/bundles/core.umd.js:1686:28: ERROR Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'b.prototype')

__extends@[native code]
file:///app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js:41:14
anonymous@file:///app/tns_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js:217:2

Package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.aboueats.meyo",
    "tns-ios": {
      "version": "4.2.0"
    },
    "tns-android": {
      "version": "4.2.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "@localization/l10n": "^2.1.7",
    "@teammaestro/nativescript-svg": "^1.0.1",
    "lodash": "^4.17.11",
    "nativescript-angular": "~6.0.0",
    "nativescript-blur": "^2.0.0",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-facebook": "^2.2.2",
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-ngx-shadow": "^6.1.0",
    "nativescript-ngx-slides": "^6.1.0",
    "nativescript-orientation": "^2.2.1",
    "nativescript-pedometer": "^2.0.2",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-ui-gauge": "^3.7.1",
    "nativescript-ui-sidedrawer": "^5.0.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.2.0",
    "tns-core-modules": "^4.2.1",
    "ts-md5": "^1.2.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~6.1.0",
    "@ngtools/webpack": "~6.2.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "commitizen": "^2.10.1",
    "cz-conventional-changelog": "^2.1.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.16.2",
    "typescript": "~2.7.2"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

Component:

import { Component, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { TitleService } from '~/services/title.service';
import { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';

@Component({
  selector: 'ns-for-me',
  templateUrl: 'for-me/for-me.component.html',
  styleUrls: ['for-me/for-me.component.css']
})

export class ForMeComponent implements OnInit, AfterViewInit {
  public tabs = 0;
  public showInput = false;
  private drawer: RadSideDrawer;
  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;

  constructor(
    private page: Page,
    private titleService: TitleService,
    private _changeDetectionRef: ChangeDetectorRef
  ) {
    this.page.actionBarHidden = true;
    this.titleService.title.emit('For Me');
  }

  ngOnInit() { }

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

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

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

}

View:

<RadSideDrawer tkExampleTitle tkToggleNavButton>
  <StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout">
      <Label text="Navigation Menu"></Label>
    </StackLayout>
    <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
  </StackLayout>
  <FlexboxLayout id="main-wrapper" tkMainContent>
    <StackLayout id="tabs">
      <Button text="Nutrición" (tap)="tabs = 0" [ngClass]="{'active': tabs === 0}"></Button>
      <Button text="Deporte" (tap)="tabs = 1" [ngClass]="{'active': tabs === 1}"></Button>
    </StackLayout>
    <ScrollView>
      <StackLayout id="nutrition-wrapper" *ngIf="tabs === 0">
        <Label id="nutrition-header" text="¡Tienes nuevos consejos sobre nutrición!" textWrap="true"></Label>
        <StackLayout class="bubble">
          <Image src="~/images/bubble-arrow-left.png" class="arrow"></Image>
          <StackLayout>
            <Label text="Te saciarás mejor si eliges recetas ricas en proteína y fibra" textWrap="true"></Label>
          </StackLayout>
        </StackLayout>
        <StackLayout class="bubble user">
          <StackLayout>
            <Label text="Hola" textWrap="true"></Label>
          </StackLayout>
          <Image src="~/images/bubble-arrow-right.png" class="arrow"></Image>
        </StackLayout>
        <FlexboxLayout class="button-group">
          <Button class="left" text="Excluir alimentos"></Button>
          <Button text="Incluir alimentos" (tap)="showInput = true"></Button>
          <Button class="right" text="Nada"></Button>
        </FlexboxLayout>
      </StackLayout>
    </ScrollView>
    <StackLayout id="input-wrapper" *ngIf="showInput === true">
      <TextField hint="¿Qué alimentos quieres incluir?" class="ghost"></TextField>
      <Label text="&#xf130;" class="i no-bg"></Label>
    </StackLayout>
  </FlexboxLayout>
</RadSideDrawer>

Copied from original issue: NativeScript/NativeScript#6515

ProgressNS / nativescript-ui-feedback

RadSlideDrawer: undefined is not an object (evaluating 'b.prototype') #917