Cordova – No camera supplier! Injectionerror

import {NgModule, ErrorHandler} from'@angular/core';
import {BrowserModule} from'@angular/platform-browser';
import {IonicApp, IonicModule, IonicErrorHandler} from'ionic-angular';
import {MyApp} from'./app.component';< br />import {HttpModule} from'@angular/http';

import {AboutPage} from'../pages/about/about';
import {ContactPage} from'. ./pages/contact/contact';
import {HomePage} from'../pages/home/home';
import {TabsPage} from'../pages/tabs/tabs';< br />
import {StatusBar} from'@ionic-native/status-bar';
import {Spla shScreen} from'@ionic-native/splash-screen';
import {CameraExamplePage} from "../pages/camara-example/camara-example";

@NgModule({ 
 declarations: [
 MyApp,
 AboutPage,
 ContactPage,
 HomePage,
 TabsPage,
 CameraExamplePage
 ],
 imports: [
 BrowserModule,
 HttpModule,
 IonicModule.forRoot(MyApp)
 ],
 bootstrap: [IonicApp],
 entryComponents: [ 
 MyApp,
 AboutPage,
 ContactPage,
 HomePage,
 TabsPage,
 CameraExamplePage
 ],
 providers: [
 StatusBar,
 SplashScreen,
 {provide: ErrorHandler, useClass: IonicErrorHandler}
 ]
})
export class AppModule {}

 

 camaraExample
 






  Take Photo 
 
 

 

import {Component } from'@angular/core';
import {IonicPage, NavController, NavParams} from'ionic-angular';
import {Camera, CameraOptions} from'@ionic-native/camera'

@IonicPage()
 @Component({
 selector:'page-camara-example',
 templateUrl:'camara-example.html',
} )
 export class CameraExamplePage {
 imageURL

 constructor(public navCtrl: NavController, public navParams: NavParams, public camera: Camera) {
 }
 ionViewDidLoad () {
 console.log('ionViewDidLoad CameraExamplePage');
 }

 takePhoto()
 {
 const options: CameraOptions = {
 quality: 100,
 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:
 //let base64Image ='data:image/jpeg;base64,' + imageData;

 this.imageURL = imageData


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

 }


}

import {Camera} from'@ionic-native/camera';/ /import in app.module.ts

 //...

 providers: [
 StatusBar,
 SplashScreen,
 {provide : ErrorHandler, useClass: IonicErrorHandler},
 Camera //here
 ]

import {Platform} from'ionic- angular'; //import Platform
//...
constructor(public platform:Platform){}
//...
takePhoto() {
 this.platform.ready().then(() => {
 if(this.platform.is('cordova')){
 this.camera.getPicture(this.options).then( (imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64 (DATA_URL):
 let base64Image ='data:image/jpeg; base64,' + imageData;
 }, (err) => {
 // Handle error
 });
 }
 })
}< /pre> 

I am a beginner in Ionic 2. I want to use the camera in Ionic. I follow the https://ionicframework.com/docs/native/camera/ tutorial.
I have installed cordova-plugin-camera plugin and installed ionic native/camera using cli code.

When I serve the project, it shows a runtime error:

Uncaught(in promise):Error: No provider for Camera! injectionError

I send app.module.ts, html page, and input script page. Please take a look.

app.module.ts

import {NgModule, ErrorHandler} from'@angular/core';
import {BrowserModule} from'@angular/platform-browser';
import {IonicApp, IonicModule , IonicErrorHandler} from'ionic-angular';
import {MyApp} from'./app.component';
import {HttpModule} from'@angular/http';

import {AboutPage} from'../pages/about/about';
import {ContactPage} from'../pages/contact/contact';
import {HomePage} from'../ pages/home/home';
import {TabsPage} from'../pages/tabs/tabs';

import {StatusBar} from'@ionic-native/status-bar' ;
import {SplashScreen} from'@ionic-native/splash-screen';
import {CameraExamplePage} from "../pages/camara-example/camara-example";
< br />@NgModule({
 declarations: [
 MyApp,
 AboutPage,
 ContactPage,
 HomePage,
 TabsPage,
 Camera ExamplePage
 ],
 imports: [
 BrowserModule,
 HttpModule,
 IonicModule.forRoot(MyApp)
 ],
 bootstrap: [IonicApp ],
 entryComponents: [
 MyApp,
 AboutPage,
 ContactPage,
 HomePage,
 TabsPage,
 CameraExamplePage
 ], 
 providers: [
 StatusBar,
 SplashScreen,
 {provide: ErrorHandler, useClass: IonicErrorHandler}
 ]
})
export class AppModule {}

Camera takes Html page

 < br />
 camaraExample
 






  Take Photo 
 < br /> 

 

** TypeScript file**

import {Component} from'@angular/core';
import {IonicPage, Nav Controller, NavParams} from'ionic-angular';
import {Camera, CameraOptions} from'@ionic-native/camera'

@IonicPage()
 @Component({ 
 selector:'page-camara-example',
 templateUrl:'camara-example.html',
 })
 export class CameraExamplePage {
 imageURL

 constructor(public navCtrl: NavController, public navParams: NavParams, public camera: Camera) {
 }
 ionViewDidLoad() {
 console.log('ionViewDidLoad CameraExamplePage'); 
 }

 takePhoto()
 {
 const options: CameraOptions = {
 quality: 100,
 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:
 //let base64Im age ='data:image/jpeg;base64,' + imageData;

 this.imageURL = imageData


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

 }


}

You need to set Camera as the provider in app.module.ts

import {Camera} from'@ionic-native/camera';/ /import in app.module.ts

 //...

 providers: [
 StatusBar,
 SplashScreen,
 {provide : ErrorHandler, useClass: IonicErrorHandler},
 Camera //here
 ]

While I Serve the project it shows Runtime Error

Note: Cordova plugin does not work in ionic services.. You need to use an emulator/device.
In addition, include your plugin code in this.platform.ready() and use this.platform.is( 'cordova') check if cordova is available

import {Platform} from'ionic-angular'; //import Platform
//...
 constructor(public platform:Platform){}
//...
takePhoto() {
 this.platform.ready().then(() => {
 if (this.platform.is('cordova')){
 this.cam era.getPicture(this.options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64 (DATA_URL):
 let base64Image ='data:image/jpeg;base64,' + imageData;
 }, (err) => {
 // Handle error
 });
 }< br /> })
}