Ionic v4 Uncaught TypeError: Object(...) is not a function

Question

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { ModalController, NavParams } from '@ionic/angular';
import { SelecttopicPage } from '../selecttopic/selecttopic.page';
import { ActionSheetController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';
import { Media } from '@ionic-native/media';
import { File } from '@ionic-native/file';
import { Diagnostic } from '@ionic-native/diagnostic';
import { AndroidPermissions } from '@ionic-native/android-permissions';

const MEDIA_FILES_KEY = 'mediaFiles';

@Component({
  selector: 'app-uploadvid',
  templateUrl: './uploadvid.page.html',
  styleUrls: ['./uploadvid.page.scss'],
})
export class UploadvidPage implements OnInit {
  @ViewChild('myvideo') myVideo: any;
  //uploadVid: FormGroup;
  public filePath: string;
  public mediaFiles = [];
  public isAndroid: boolean;

  uploadVid = new FormGroup({
    title: new FormControl('', Validators.required),
    topic: new FormControl({value: '', disabled: true}, Validators.required),
    target: new FormControl('', Validators.required)
  });

  PERMISSION = {
    WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
    READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
    CAMERA: this.diagnostic.permission.CAMERA,
  };

  constructor(public formBuilder: FormBuilder, 
    public modalCtrl: ModalController, 
    public platform: Platform, 
    public actionSheetController: ActionSheetController, 
    public storage: Storage, 
    public mediaCapture: MediaCapture, 
    public media: Media, 
    public file: File, 
    private diagnostic: Diagnostic, 
    private androidPermissions: AndroidPermissions) { 

    // this.uploadVid = formBuilder.group({
    //   title: ['', Validators.compose([Validators.required])],
    //   topic: ['', Validators.compose([Validators.required])],
    //   target: ['', Validators.compose([Validators.required])]
    // });
  }

  ngOnInit() {
    this.checkIfMobile();
  }

  loadStoredVideo(){
    this.storage.get(MEDIA_FILES_KEY).then(res => {
        this.mediaFiles = JSON.parse(res) || [];
    });
  }

  checkIfMobile(){
    if(this.platform.is('android')){
      this.isAndroid = true;
    }else{
      this.isAndroid = false;
    }
  }

  async openModal() {
    const modal = await this.modalCtrl.create({
      component: SelecttopicPage,
      //componentProps: { value: 123 }
    });

    modal.onDidDismiss((topic) => {

      console.log("topic2: "+topic);
      this.uploadVid.controls['topic'].setValue(topic);

    })

    return await modal.present();

  }

  // for web & ios
  handleFileSelect(evt){
    this.filePath = evt.target.files;
    alert("Selected Video: "+this.filePath);
  }

  // for android
  async openVidOption() {
    const actionSheet = await this.actionSheetController.create({
      header: "Albums",
      buttons: [{
        text: 'Camera',
        role: 'destructive',
        icon: 'camera',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Gallery',
        role: 'cancel',
        icon: 'folder-open',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

  checkAndroidPerm(){
    if(this.platform.is('android')){
       //this.requestAllPermissions();
       this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
        (success) => {console.log('Succes granted the permissions');
        this.captureVideo()},
        (err) => {this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)}
    );

    this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE]);
    }
  }

  // requestAllPermissions(){
  //   const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
  //   this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
  //           alert(JSON.stringify(status));
  //       }, error => {
  //           alert('Error: '+ error);
  //   });
  // }

  captureVideo(){
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
        //this.storeMediaFiles(res);
        let capturedFile = res[0];
        console.log('capturedFile: '+capturedFile);
        let fileName = capturedFile.name;
        let dir = capturedFile['localURL'].split('/');
        dir.pop();
        let fromDirectory = dir.join('/');
        let toDirectory = this.file.dataDirectory;

        this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res => {
          let url = res.nativeURL.replace(/^file:\/\//, '');
          this.storeMediaFiles([{name: fileName, size: capturedFile.size, localURL: url}]);
        });
    });
  }

  storeMediaFiles(files){
    this.storage.get(MEDIA_FILES_KEY).then(res =>{
      if(res){
        let arr = JSON.parse(res);
        arr = arr.concat(files);
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr));
      }else{
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files));
      }
      this.mediaFiles = this.mediaFiles.concat();
    })
  }

  playFile(myFile){
    console.log('play: ', myFile);
    let video = this.myVideo.nativeElement;
    video.src = myFile.localURl;
  }



  

}

I am new in Ionic and was working on video capture functionality from this tutorial. When I build android apk and opened the app I got blank screen. So I checked in computer browser and got error as shown in screenshot. I tried to search for its solution and found this posts Link1 and Link2 but this also did not resolved my issue.

If anyone can help me in this regard, it would be good. Thanks in advance.

// config.xml

<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
    <plugin name="cordova-sqlite-storage" spec="^2.3.3" />
    <plugin name="cordova-plugin-filechooser" spec="^1.0.1" />
    <plugin name="cordova-plugin-filepicker" spec="^1.1.5" />
    <plugin name="cordova-plugin-filepath" spec="^1.4.2" />
    <plugin name="cordova-plugin-camera" spec="^4.0.3" />
    <plugin name="cordova-plugin-file" spec="^6.0.1" />
    <plugin name="cordova-plugin-media" spec="^5.0.2">
    <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
    <plugin name="cordova.plugins.diagnostic" spec="^4.0.8" />
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="7.0.0" />
    <plugin name="cordova-plugin-media-capture" spec="^3.0.2" />

// package.json

"dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/android-permissions": "^4.12.0",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/diagnostic": "^4.12.0",
    "@ionic-native/file": "^4.12.0",
    "@ionic-native/file-chooser": "^4.12.0",
    "@ionic-native/file-path": "^4.12.0",
    "@ionic-native/media": "^4.12.0",
    "@ionic-native/media-capture": "^4.12.0",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/lab": "^1.0.2",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "angular-progress-http": "^1.0.0",
    "cordova-android": "7.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-filechooser": "^1.0.1",
    "cordova-plugin-filepath": "^1.4.2",
    "cordova-plugin-filepicker": "^1.1.5",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-media": "^5.0.2",
    "cordova-plugin-media-capture": "^3.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.3",
    "cordova.plugins.diagnostic": "^4.0.8",
    "core-js": "^2.5.3",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler": "6.0.9",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angular-devkit/architect": "0.7.0-rc.3",
    "@angular-devkit/build-angular": "0.7.0-rc.3",
    "@angular-devkit/core": "0.7.0-rc.3",
    "@angular-devkit/schematics": "0.7.0-rc.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.7.2"
  }

Answer 1

All I had to do was: In dependencies, instead of "@ionic-native/media-capture": "^4.12.0" I wrote "@ionic-native/media-capture": "^5.0.0-beta.14". After that I typed npm update in CLI. And in my page component I used import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx';. The important part here is /ngx as described in this link. Well I had to do this for AndroidPermissions, Diagnostic, Media and File. After that issue was solved. Hope it will help others.

Answer 2

solved by installing

npm install --save @ionic-native/[email protected]