Could not load view for: DrawingPad


#1

I got this error with a simple component with the latest version of nativescript and angular

Any ideas?

The error occurs only on android. (iOS works)

Error

JS: ERROR Error: Uncaught (in promise): TypeError: Could not load view for: DrawingPad.TypeError: Cannot read property ‘SignaturePad’ of undefined
JS: TypeError: Could not load view for: DrawingPad.TypeError: Cannot read property ‘SignaturePad’ of undefined
JS: at Object.getViewClass (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/nativescript-angular/element-registry.js:88:15)
JS: at ViewUtil.createView (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/nativescript-angular/view-util.js:201:44)
JS: at EmulatedRenderer.NativeScriptRenderer.createElement (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/nativescript-angular/renderer.js:109:30)
JS: at EmulatedRenderer.createElement (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/nativescript-angular/renderer.js:361:51)
JS: at DebugRenderer2.createElement (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:14896:49)
JS: at createElement (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:10309:27)
JS: at createViewNodes (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:13450:61)
JS: at callViewAction (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:13921:13)
JS: at execComponentViewsAction (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:13830:13)
JS: at createViewNodes (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:13517:5)
JS: at createRootView (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:13379:5)
JS: at callWithDebugContext (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:14780:42)
JS: at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:14081:12)
JS: at ComponentFactory_.create (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:11000:46)
JS: at ComponentFactoryBoundToModule.create (file:///data/data/org.nativescript.skychecklist/files/app/tns_modules/@angular/core/bundles/core.umd.js:3961:29)
21:32:57 - Compilation complete. Watching for file changes.

package.json

"nativescript": {
	"id": "org.nativescript.skychecklist",
	"tns-android": {
		"version": "3.4.0"
	},
	"tns-ios": {
		"version": "3.4.0"
	}
},
"dependencies": {
	"@angular/animations": "~5.0.0",
	"@angular/common": "~5.0.0",
	"@angular/compiler": "~5.0.0",
	"@angular/core": "~5.0.0",
	"@angular/forms": "~5.0.0",
	"@angular/http": "~5.0.0",
	"@angular/platform-browser": "~5.0.0",
	"@angular/platform-browser-dynamic": "~5.0.0",
	"@angular/router": "~5.0.0",
	"allow-publish": "^1.0.4",
	"nativescript-angular": "~5.0.0",
	"nativescript-drawingpad": "^2.1.1",
	"nativescript-pro-ui": "^3.3.0",
	"nativescript-theme-core": "~1.0.4",
	"reflect-metadata": "~0.1.8",
	"rxjs": "~5.5.2",
	"tns-core-modules": "~3.4.0",
	"zone.js": "~0.8.2"
},
"devDependencies": {
	"babel-traverse": "6.26.0",
	"babel-types": "6.26.0",
	"babylon": "6.18.0",
	"lazy": "1.0.11",
	"nativescript-dev-typescript": "~0.6.0",
	"typescript": "~2.4.2"
}

This is the code from the layout

    <StackLayout orientation="horizontal">
        <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
        <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
        <Button class="btn btn-primary btn-active" text="Submit" (tap)="submit()"></Button>
    </StackLayout>
</StackLayout>

And this is the ts code:

import { Component, OnInit, ViewChild, ElementRef } from ‘@angular/core’;
import { registerElement } from “nativescript-angular/element-registry”;
import { ModalDialogParams } from ‘nativescript-angular’;

registerElement(“DrawingPad”, () => require(“nativescript-drawingpad”).DrawingPad);
var ImageModule = require(“ui/image”);
var ImageSourceModule = require(“image-source”);

@Component({
moduleId: module.id,
selector: ‘app-signatur’,
templateUrl: ‘./signatur.component.html’,
styleUrls: [’./signatur.component.scss’]
})
export class SignaturComponent implements OnInit {

@ViewChild(“DrawingPad”) DrawingPad: ElementRef;
@ViewChild(“myImage”) myImage: ElementRef;

public base64: any;

constructor(private params: ModalDialogParams) { }

ngOnInit() { }

public submit() {
this.params.closeCallback(this.base64);
}

getMyDrawing(args) {
// get reference to the drawing pad
let pad = this.DrawingPad.nativeElement;

  // then get the drawing (Bitmap on Android) of the drawingpad
  let drawingImage;
  this.base64 = pad.getDrawing().then(function(data) {
      console.log(data);
      drawingImage = data; 
      var image = ImageSourceModule.fromNativeSource( data ); 
      var mybase64 = image.toBase64String('png');
      return  mybase64;
  });

}

clearMyDrawing(args) {
var pad = this.DrawingPad.nativeElement;
pad.clearDrawing();
}
}