Angular Ionic import Native Camera

Question

I have an ionic application. And I want to open camera inside application.

In app module I imported like below.

import { NgModule,ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './services/dataService';
import { SessionService } from './services/sessionService';
import { TransferService } from './services/TransferService';
import { ToasterService } from './services/ToasterService';
import { QflowService } from './services/qflowService';
import { Camera } from '@ionic-native/camera';//import in app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FormsModule,HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    DataService,SessionService,TransferService,ToasterService,QflowService,
    Camera
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I created one page with command below ionic generate page newsq then . In this page I want to open camera . In component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ViewWillEnter, Platform } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { QflowModel, Tags } from 'src/app/models/qflow';
import { URLS } from 'src/app/models/Url';
import { DataService } from 'src/app/services/dataService';
import { QflowService } from 'src/app/services/qflowService';

@Component({
  selector: 'app-newq',
  templateUrl: './newq.page.html',
  styleUrls: ['./newq.page.scss'],
})
export class NewqPage implements ViewWillEnter {
  qflow: QflowModel;
  tags: Tags[] = [];
  selectedTags = [];
  title = "";
  options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  constructor(public platform: Platform, private camera: Camera, private qflowService: QflowService, private dataService: DataService, private router: Router) {
  }
  ionViewWillEnter(): void {
    const subj = new Subject<boolean>();
    this.qflowService.getData.pipe(takeUntil(subj)).
      subscribe(element => {
        subj.next(true); this.qflow = element;
        if (!this.qflow && this.qflow.examId == 0) { this.router.navigateByUrl("/home"); }
        this.getTags();
      });
  }
  getTags() {
    this.dataService.Post(URLS.url.qflow.TagsPage.getTags, { examId: this.qflow.examId, page: 1 }).subscribe(
      result => {
        this.tags = result;
      }
    );
  }
  getPicture() {
    this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
        this.camera.getPicture(this.options).then((imageData) => {
          let base64Image = 'data:image/jpeg;base64,' + imageData;
        }, (err) => {
          // Handle error
        });
      }
    })
  }
}

my problem is that project gives white blank page while I add Camera in app modules. I couldn't figure where is my missing. I spent one day but still not found solution.. My error image is below

How can I solve the problem ?

Thanks in advance

Answer 1

I just solved problem with changing in app.modules

import { Camera } from '@ionic-native/camera';

to

import { Camera } from '@ionic-native/camera/ngx';