没有相机的供应商！ injectionError

Question

我是Ionic 2的初学者。我想在Ionic中使用相机。我跟着https://ionicframework.com/docs/native/camera/页面。 我已经安装了cordova-plugin-camera插件 并使用cli代码保存了离子本机/相机。

虽然我所服务的项目它显示运行时错误：

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

我送了app.module.ts，HTML网页和类型的脚本页面。请看一看。

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 { CamaraExampalePage } from "../pages/camara-exampale/camara-exampale"; 

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

相机拍摄的HTML页面

<ion-header> 


    <ion-navbar> 

    <ion-title>camaraExampale</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 

    <button ion-button color="dark" (click)="takePhoto()" > Take Photo 
    </button> 
    <img [src]="imageURL" *ngIf="imageURL"> 

</ion-content> 

**打字稿文件**

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

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

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

    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 
    }); 

} 


} 

Answer 1

您需要设置相机提供者个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

注：科尔多瓦插件不工作离子发球。你需要使用模拟器/设备。 此外，包括内this.platform.ready()你的插件代码，并检查是否科尔多瓦可使用this.platform.is('cordova')

this.platform.ready().then(() = > { 
if(this.platform.is('cordova')){ 
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 
    }); 
} 
}); 

Answer 2

你需要使用两个命令

$离子科尔多瓦插件添加科尔多瓦 - 插件相机先安装摄像头插件

$ NPM安装--save @离子本地/相机

后，在您的app.module.ts需要import是plugins和改变你的provider

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 { CamaraExampalePage } from "../pages/camara-exampale/camara-exampale"; 
import { Camera, CameraOptions } from '@ionic-native/camera'; 
@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    CamaraExampalePage 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    CamaraExampalePage 
    ], 
    providers: [ 
    Camera, CameraOptions, 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler} 
    ] 
}) 
export class AppModule {}