Plugins native error: Object(…) is not a function

Hi, I have had problems with an error that I have given certain plugin. In concrete those ones:

import { FilePath } from ‘@ionic-native/file-path/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { IOSFilePicker } from ‘@ionic-native/file-picker/ngx’;
import { FileOpener } from ‘@ionic-native/file-opener/ngx’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { LaunchNavigator } from ‘@ionic-native/launch-navigator/ngx’;
import { Base64 } from ‘@ionic-native/base64/ngx’;

I added the ngx since they were giving me compilation errors (here is the post that solved the problem for me (https://stackoverflow.com/questions/54361396/ionic-3-error-install-native-plugin-after-ionic-4-release)) in my module.app. Once I added the termination of the imports, the application compile but when using any of the funtion of plugins I get the error ERROR TypeError: Object (…) is not a function
I have plugin and ionic versions updated.

Muchas gracias.

Hi Jorch.

Can you show your constructor and an example of what’s not working please ?

Thanks

@AdamGelineau
Some examples of plugins that dont work:

First of all here is my module.app where is all my plugins:

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule, Select } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SQLite } from ‘@ionic-native/sqlite’;
import { HttpModule } from ‘@angular/http’;
import { File } from ‘@ionic-native/file’;
import { FilePath } from ‘@ionic-native/file-path/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { IOSFilePicker } from ‘@ionic-native/file-picker/ngx’;
import { FileOpener } from ‘@ionic-native/file-opener/ngx’;
import { Device } from ‘@ionic-native/device’;
import { BarcodeScanner } from ‘@ionic-native/barcode-scanner’;
import { BluetoothSerial } from ‘@ionic-native/bluetooth-serial’;
import { BLE } from ‘@ionic-native/ble’;
import { AnimationService, AnimationBuilder } from ‘css-animator’;
import { SignaturePadModule } from ‘angular2-signaturepad’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { LaunchNavigator } from ‘@ionic-native/launch-navigator/ngx’;
import { Base64 } from ‘@ionic-native/base64/ngx’;

import { MyApp } from ‘./app.component’;
import { FirmarPage } from ‘…/pages/firmar/firmar’;

import { BaseDatos } from ‘…/providers/basedatos’;
import { FuncionesGlob } from ‘…/providers/funciones’;
import { Babel } from ‘…/providers/babel’;
import { OpcionesAvanzadas } from ‘…/providers/opciones-avanzadas’;
import { Sincronizacion } from ‘…/providers/sincronizacion’;

@NgModule({
declarations: [
MyApp,
FirmarPage
],
imports: [
BrowserModule,
HttpModule,
SignaturePadModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
FirmarPage
],
providers: [
AnimationService,
AnimationBuilder,
StatusBar,
SplashScreen,
SQLite,
File,
FilePath,
FileChooser,
IOSFilePicker,
FileOpener,
Device,
BarcodeScanner,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BaseDatos,
FuncionesGlob,
Babel,
OpcionesAvanzadas,
Sincronizacion,
Select,
BluetoothSerial,
BLE,
Geolocation,
LaunchNavigator,
Base64
]
})
export class AppModule {}

the plugin that include /ngx are the plugins that dont work but i have to add this to the aplication can compile without errors.

Then I used it like other plugins (also before updatings or somthing the plugins didnt need the /ngx and everything works perfectly)

Examples that not working to me:

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, LoadingController, PopoverController, ModalController, ActionSheetController } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { LaunchNavigator, LaunchNavigatorOptions } from ‘@ionic-native/launch-navigator/ngx’;
//import { AnimationService, AnimationBuilder } from ‘css-animator’
//import { MenuCuentaPage } from ‘…/menu-cuenta/menu-cuenta’;

import { FuncionesGlob } from ‘…/…/providers/funciones’;
import { BaseDatos } from ‘…/…/providers/basedatos’;
import { Babel } from ‘…/…/providers/babel’;
import { Sincronizacion } from ‘…/…/providers/sincronizacion’;

import { Intervencion } from ‘…/…/models/intervencion’;
import { Aparato } from ‘…/…/models/aparato’;
import { Estado } from ‘./…/…/models/clases’;

@IonicPage()
@Component({
selector: ‘page-intervenciones’,
templateUrl: ‘intervenciones.html’,
})
export class IntervencionesPage {

constructor(public loadingCtrl: LoadingController, private modalCtrl: ModalController, public navCtrl: NavController, public navParams: NavParams, private popoverCtrl: PopoverController, public funciones: FuncionesGlob, public basedatos: BaseDatos, public babel: Babel, public actionSheetController: ActionSheetController, public sincronizacion: Sincronizacion,private launchNavigator: LaunchNavigator, public geolocation: Geolocation) {


navigateLocation(direccionDestino: string, descripcionDestino: string) {


//THIS GIVEME THE ERROR 'Object(…) is not a function
this.launchNavigator.navigate(direccionDestino, options)
.then(success => {
console.log(success);
}, error => {
console.log(error);
})

}

another example of my code:

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, ViewController } from ‘ionic-angular’;
import { BaseDatos } from ‘…/…/providers/basedatos’;
import { FuncionesGlob } from ‘…/…/providers/funciones’;
import { Babel } from ‘…/…/providers/babel’;

import { FilePath } from ‘@ionic-native/file-path/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { IOSFilePicker } from ‘@ionic-native/file-picker/ngx’;
import { FileOpener } from ‘@ionic-native/file-opener/ngx’;
import { Base64 } from ‘@ionic-native/base64/ngx’;
import { Platform } from ‘ionic-angular’;
import { DomSanitizer } from ‘@angular/platform-browser’;
import { Documento } from ‘…/…/models/clases’;
import { Sincronizacion } from ‘…/…/providers/sincronizacion’;

@IonicPage()
@Component({
selector: ‘page-documentos’,

templateUrl: ‘documentos.html’,

constructor( public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController, private basedatos: BaseDatos, public babel: Babel, public sincronizacion: Sincronizacion, private platform: Platform, private funciones: FuncionesGlob, public DomSanitizer: DomSanitizer) {

//THIS GIVEME THE ERROR 'Object(…) is not a function
this.FileChooser.open().then(url => {
this.FilePath.resolveNativePath(url).then(pathAux => {


//THIS GIVEME THE ERROR TOO 'Object(…) is not a function
fetch(base64Data,
{
method: “GET”
}).then(res => res.blob()).then(blob => {
this.funciones.file.writeFile(this.funciones.file.externalApplicationStorageDirectory, nombre_fichero, blob, { replace: true }).then(res => {
this.fileOpener.open(
res.toInternalURL(),
tipo_mime
).then((res) => {
console.log(“metodo2 susscess”)
resolve(true);
}).catch(err => {
this.funciones.GrabarLog([‘open error’, err], false)
});
}).catch(err => {
this.funciones.GrabarLog([‘save error’, err], false)
});
}).catch(err => {
this.funciones.GrabarLog([‘error’, err], false)
})

same issue here can you help please

Any update of this issue?

So I think this is only supported on mobile not web. Check here https://ionicframework.com/docs/native/file-chooser. But another thing is if you call it as a property “.open” instead of open(), the error goes away

The only solution I found so far was to not use the provider.

Inside your constructor, use:

plt.ready().then(platform => {
    this.picker = window['fileChooser'];
})

Now calling this.picker.open() opens the picker.