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

Might be an issue with the way you are accessing the media capture plugin. can you please paste the component code. — Suresh Kumar Ariya
– Suresh Kumar Ariya, Commented Aug 24, 2018 at 12:29
It's dying on the line: __decorate([ Cordova({ successIndex: 1, errorIndex: 2 }) I'm completely new to Ionic / Cordova, but this happened to me after I installed the GooglePlus plugin. Seems to me like Ionic v4 might not be ready for use and I'll likely go to Ionic 3 and see if that works for me. — ItsJason
– ItsJason, Commented Aug 28, 2018 at 2:32

Somnath Pal · Accepted Answer · 2018-08-31 07:22:42Z

12

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.

answered Aug 31, 2018 at 7:22

Somnath Pal

1,5224 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak Pandit · Accepted Answer · 2019-02-13 09:46:02Z

1

solved by installing

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

edited Feb 13, 2019 at 9:46

answered Feb 12, 2019 at 8:24

Deepak Pandit

1693 bronze badges

Comments

Rajnikant Lodhi · Accepted Answer · 2019-11-29 12:15:01Z

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/[email protected]

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

Bozhidar Marinov · Accepted Answer · 2020-12-25 21:40:29Z

0

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

answered Dec 25, 2020 at 21:40

Bozhidar Marinov

1263 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related