Error after implementing camera plugin

Hey guys, I have a question. I implemented the camera plugin. Now I wanted to run the application (ionic serve -l). The problem is the all the tabs are running except for the one which uses the camera. If I try to open this tab I get this(screenshot). So am I right. this is not an error in the code but somewhere else like the camera plugin is not working properly.
Thanks in advance

Does this error appear when you are Mozilla Firefox? If this error only happens in Google Chrome, Reinstall Google Chrome, it may help :smile:

Have you imported it into your accompanying module?

@rafamaffa it appears in also in Safari and Firefox. And I tried to reinstall Chrome but it does still not work:(

@Judgewest2000 Hmmm I dont know what accompanying module is…but I imported it where it is needed-> app.module, ts area of this tab. Then I tried also to import it into app.components and into tabs.ts but that didn’t help at all to solve the problem. I dont know what sort of error this is: Uncaught (in promise):…

The accompanying module is the module accompanying the page if you are using lazy loading.

e.g.

mypage.ts
mypage.html
mypage.module.ts <- this one

AND… are you trying to use the camera plugin for a PWA type situation? Are you wanting to effectively make a web site using Ionic / as opposed to an ‘app’ to be delivered via the app stores?

@Judgewest2000 so first: Ok, so I have to create this mypage.module.ts ? Cause I only got the html, scss and ts by default (in my page).
2. No I don’t want to do a PWA or Website but an app.

You only need that file if you’re doing lazy loading (look it up). The ‘Home’ page doesn’t have one as that is not lazy loaded.

Can you either share your code with me or do a mock up?

post.html

Post

<button ion-button clear(click)=“takePicture()”>

post.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {Camera, CameraOptions} from ‘@ionic-native/camera’
@Component({
selector: ‘page-post’,
templateUrl: ‘post.html’
})
export class PostPage {
public photos: any;
public base64Image: string;

constructor(public navCtrl: NavController, private camera: Camera) {

}

ngOnInit(){
this.photos = [];

}

takePhoto(){
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it’s base64:
this.base64Image = ‘data:image/jpeg;base64,’ + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();

}, (err) => {
// Handle error
});
}
}

////and the camera plugin is added to app.module and Provider: Camera,
// I really dont have any idea why its not working I did it like I found it on the ionic website
//in the html part It didn’t copy the content, navbar etc

I’ve done a repo…

1 Like

thanks a lot!! I will just try it out.

ok it worked thanks again:)

but would we have to change there to make it lazy loaded? I moved Camera to my component.module but complains about this:

Error: StaticInjectorError(AppModule)[ImageUploadProvider -> Camera]:
StaticInjectorError(Platform: core)[ImageUploadProvider -> Camera]: NullInjectorError: No provider for Camera!

ionic-native/camera. If the media type selected is “all media”, the plugin returns an empty string in samsung galaxy tab, working fine in any android phone but not in tab,
Please help guyz