ERROR TypeError: Object(...) is not a function

Ionic Native
1

When I install any ionic-native plugin this error appears especially with @ionic-native/media-capture @ionic-native/media @ionic-native/file

erroe
erroe.PNG917×371 29.8 KB 

App Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { MediaCapture } from '@ionic-native/media-capture/ngx';
import { Media } from '@ionic-native/media/ngx';
import { File } from '@ionic-native/file/ngx';


import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    MediaCapture,
    Media,
    File
  ]
})
export class AppModule {}

home page ts

import { Component , ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture/ngx';
import { Storage } from '@ionic/storage';
import { Media, MediaObject } from '@ionic-native/media/ngx';
import { File } from '@ionic-native/file/ngx'

const MEDIA_FILES_KEY = 'mediaFiles';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  mediaFiles = [];
  @ViewChild('myvideo') myVideo: any;

  constructor(public navCtrl: NavController, private mediaCapture: MediaCapture, private storage: Storage, private file: File, private media: Media) {

  }

  ionViewDidLoad() {
    this.storage.get(MEDIA_FILES_KEY).then(res => {
      this.mediaFiles = JSON.parse(res) || [];
    })
  }
 
  captureAudio() {
    this.mediaCapture.captureAudio().then(res => {
      this.storeMediaFiles(res);
    }, (err: CaptureError) => console.error(err));
  }
 
  captureVideo() {
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
      let capturedFile = res[0];
      let fileName = capturedFile.name;
      let dir = capturedFile['localURL'].split('/');
      dir.pop();
      let fromDirectory = dir.join('/');      
      var toDirectory = this.file.dataDirectory;
      
      this.file.copyFile(fromDirectory , fileName , toDirectory , fileName).then((res) => {
        this.storeMediaFiles([{name: fileName, size: capturedFile.size}]);
      },err => {
        console.log('err: ', err);
      });
          },
    (err: CaptureError) => console.error(err));
  }
 
  play(myFile) {
    if (myFile.name.indexOf('.wav') > -1) {
      const audioFile: MediaObject = this.media.create(myFile.localURL);
      audioFile.play();
    } else {
      let path = this.file.dataDirectory + myFile.name;
      let url = path.replace(/^file:\/\//, '');
      let video = this.myVideo.nativeElement;
      video.src = url;
      video.play();
    }
  }
 
  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(files);
    })
  }

}

home HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Sound Recorder
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <ion-row>
    <ion-col>
      <button ion-button full (click)="captureAudio()">Capture Audio</button>
    </ion-col>
    <ion-col>
      <button ion-button full (click)="captureVideo()">Capture Video</button>
    </ion-col>
  </ion-row>
 
  <ion-list>
    <ion-item *ngFor="let file of mediaFiles" tappable (click)="play(file)" text-wrap>
      {{ file.name }}
      <p>{{ file.size / 1000 / 1000 | number }} MB</p>
    </ion-item>
  </ion-list>
 
  <video controls autoplay #myvideo>
  </video>
</ion-content>
1 Like
2

I’m facing the same issue. I fixed it as follows:
Instead of importing from ‘pluginName/ngx’ import from ‘pluginName’
so in your case:

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

Then, downgrade the Native plugin to a version which works. For me, I was using the geolocation plugin and the last version which worked is ^4.12.0 in my package.json

If the Ionic team is reading this, is there any better solution for this? This happens in Ionic 3

1 Like
3

I have tried many published solutions but unfortunately, the problem still exists:sweat:

4

Try

import { File } from '@ionic-native/ngx/file';
1 Like
5

Unfortunately, this solution did not succeed , But thank you so much for your help

6

It did not work either :sweat:

7

I was facing the same issue , because of update of ionic 4 compatible plugin in @ionic-native github repo. You need to install older version using : npm install --save @ionic-native/plugin_of_your_choice@4.20.0

Remember - don’t play with the number after @ , go to the repo and check for versions, and install accordingly. I

I was facing the same issue, and it stopped after i followed the above mentioned solution. You can also see https://stackoverflow.com/questions/54361396/ionic-3-error-install-native-plugin-after-ionic-4-release

3 Likes
8

What steps should I follow now to solve the problem?

9

Try To Find … Second Last Previous Version of Plugin & Append While Adding Plugin

npm install @ionic-native/native-storage@4.19.0

Here… Latest Version is 5.0.0 So Add @4.19.0 Please Don’t Make Assumption Based On
Number Go In Repo or npm link try to find our previous version then append.

Then do your All Step Regularly.

Thanks

1 Like
10

Thank you very much I have updated everything to the latest version (ionic CLI, node, angular)
And I call every plugin after update with /ngx
like :
import { MediaCapture } from '@ionic-native/media-capture to import { MediaCapture } from '@ionic-native/media-capture/ngx
import { Media } from '@ionic-native/media; to import { Media } from ‘@ionic-native/media/ngx’;
import { File } from ‘@ionic-native/file’ ; to import { File } from ‘@ionic-native/file/ngx’

Finally, it worked with me
Thanks

11

Agora eu estou com esse mesmo problema, alguem pode ajudar ?