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

3

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

4

Try

import { File } from '@ionic-native/ngx/file';
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

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

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 ?