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

user_4715906 0
Viewed 13195

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"
  }

Error

ionic-framework
4 Answers

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.

user_47159060

solved by installing

npm install --save @ionic-native/media-capture@4.20.0

user_67760360

guys, I am building a project with ionic 4 + angular 7, I'm trying to use ionic file system on my project, https://ionicframework.com/docs/native/file/

following this page, after installing all dependencies when I try to import "File" into my "appModule.ts" I get this error:

Uncaught TypeError: Object(...) is not a function at vendor.js:85920 at
Module../node_modules/@ionic-native/native_plugin/index.js
// native_plugin = any native component

fix the issues, with:
npm i -s @ionic-native/xxx@5.0.0-beta.14

  • Use Angular 6 and 6+ version

import { xxx } from '@ionic-native/xxx/ngx
import { file } from '@ionic-native/file/ngx';

  • without using Angular

import { xxx } from '@ionic-native/xxx'; import { file } from '@ionic-native/file';

Lastly check the @ionic-native/xxx versions on npm:
https://www.npmjs.com/package/@ionic-native/xxx
https://www.npmjs.com/package/@ionic-native/file

you have to use the version 5.x.x for ANGULAR and 4.x.x ANGULAR-IONIC. Check your project type on your ionic.config.json file

user_97627360

If use you Ionic v4, use should strictly only use ionic native v5 beta. In your package.json I see that one signal is on v4.12.2 which is not correct, you should upgrade it to v5.0.0-beta.15

user_88182740
Related