沒有相機的供應商！ 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 {}