i am getting errors on all the Camera methods for example:
Property ‘takePicture’ does not exist on type ‘Camera’.
Property ‘PictureSourceType’ does not exist on type ‘typeof Camera’.
Property ‘getPicture’ does not exist on type ‘typeof Camera’.
Any ideas?
If you’re using the latest Ionic Native then Camera is now an injected class variable rather than a static class.
So, in your constructor you’ll have this (along with whatever else you have in here, of course)
constructor(camera: Camera) {
}
Then elsewhere you call the methods on this.camera, e.g.
takePictureClicked() {
this.camera.takePicture();
}
Yes, I have done that, here is my code, still getting the error…
import { Component } from '@angular/core';
import { NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';
declare var cordova: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
lastImage: string = null;
loading: Loading;
constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController,private camera : Camera, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController) {}
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler: () => {
this.camera.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler: () => {
this.camera.takePicture(Camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
What does your package.json look like?
(I mean, aside from a file obviously)
{
"name": "ionic-hello-world",
"version": "0.0.0",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/camera": "^3.5.0",
"@ionic-native/core": "^3.4.2",
"@ionic-native/file": "^3.5.0",
"@ionic-native/file-path": "^3.5.0",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic-native/transfer": "^3.5.0",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionic-native": "^3.5.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "TrueIdFace: An Ionic project"
}
$5 says the error message has changed to “No provider for ‘Camera’”.
I am also Getting same Error…
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
imageURL
constructor(camera: Camera) {
}
takePhoto(){
this.camera.getPicture().then((imageData) => {
this.imageURL = imageData
}, (err) => {
console.log(err);
});
}
}
(index):35 GET http://localhost:8100/build/main.css
(index):44 GET http://localhost:8100/build/polyfills.js
core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators
DecoratorFactory @ core.es5.js:354
(anonymous) @ about.ts:4
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ home.ts:9
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ platform-browser-dynamic.es5.js:170
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ src async:7
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ main.js:111836
webpack_require @ bootstrap f4e2a5a…:19
(anonymous) @ bootstrap f4e2a5a…:65
(anonymous) @ bootstrap f4e2a5a…:65
ion-dev.js?v=1.3.7:450 Uncaught TypeError: Cannot read property ‘replace’ of undefined
at Object.escapeHtml (ion-dev.js?v=1.3.7:450)
at Object.handleError (ion-dev.js?v=1.3.7:79)
at window.onerror (ion-dev.js?v=1.3.7:41)
escapeHtml @ ion-dev.js?v=1.3.7:450
handleError @ ion-dev.js?v=1.3.7:79
window.onerror @ ion-dev.js?v=1.3.7:41
What makes you think this is “the same error”?
I got the Error
Camera Plugin: Property ‘takePicture’ does not exist on type ‘Camera’
So I tried this solution and got above error
If you’re using the latest Ionic Native then Camera is now an injected class variable rather than a static class.
So, in your constructor you’ll have this (along with whatever else you have in here, of course)
constructor(camera: Camera) {
}
Then elsewhere you call the methods on this.camera, e.g.
takePictureClicked() {
this.camera.takePicture();
}
But your error says “Cannot read property ‘replace’ of undefined”, which indicates that you are attempting to access a replace property of something that doesn’t have one.
Issue has been resolved
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//import { Camera } from 'ionic-native';
import { Camera, CameraOptions, CameraPopoverOptions } from '@ionic-native/camera';
@Component({
selector: 'page-home',
providers: [Camera],
templateUrl: 'home.html'
})
export class HomePage {
imageURL
constructor(private camera:Camera, public navCtrl: NavController) {
}
options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
popover: CameraPopoverOptions = {
x: 20,
y: 60,
width: 200,
height: 100,
arrowDir: 1
}
takePhoto(){
this.camera.getPicture(this.options).then((imageData) => {
this.imageURL = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log(err);
});
}
}