Ionic-native: Ionic Native File plugin not working

[labmux]

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
After updating ionic, the ionic native file plugin is causing a bunch of errors to show up all over the place, and not allowing my code to run. Here are some errors I am getting:

(in app module)
error TS2322: Type 'FileOriginal' is not assignable to type 'Provider'.
Type 'FileOriginal' is missing the following properties from type 'TypeProvider': apply, call, bind, prototype, and 5 more.

error TS2339: Property 'documentsDirectory' does not exist on type 'File'.
this.rootDirectory = this.isIOS ? this.file.documentsDirectory : this.file.externalDataDirectory

error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature. var fileSys = new File();

error TS2339: Property 'createDir' does not exist on type 'File'.
return this.file.createDir(this.rootDirectory, dirName, true)

Pretty much any where I use a 'file' function, it tells me it does not exist. Whats weird is that my ide is able to trace the function back to its root when I ctrl click it, so its clearly there.

Expected behavior:
I expect the plugin to run without any errors

Steps to reproduce:
update ionic. then

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

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

Then ionic serve or ionic build

Related code:

Other information:

All errors

[ng] ERROR in app/app.module.ts:85:5 - error TS2322: Type 'FileOriginal' is not assignable to type 'Provider'.
[ng] Type 'FileOriginal' is missing the following properties from type 'TypeProvider': apply, call, bind, prototype, and 5 more.
[ng] 85 File, // important for file writing
[ng] ~~
[ng] app/pages/base/base.page.ts:653:23 - error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.
[ng] 653 var fileSys = new File();
[ng] ~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:36:57 - error TS2339: Property 'documentsDirectory' does not exist on type 'File'.
[ng] 36 this.rootDirectory = this.isIOS ? this.file.documentsDirectory : this.file.externalDataDirectory
[ng] ~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:36:88 - error TS2339: Property 'externalDataDirectory' does not exist on type 'File'.
[ng] 36 this.rootDirectory = this.isIOS ? this.file.documentsDirectory : this.file.externalDataDirectory
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:59:26 - error TS2339: Property 'createDir' does not exist on type 'File'.
[ng] 59 return this.file.createDir(this.rootDirectory, dirName, true)
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:63:26 - error TS2339: Property 'createFile' does not exist on type 'File'.
[ng] 63 return this.file.createFile(this.rootDirectory + (dirName ? dirName : this.dirName), fileName, true);
[ng] ~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:67:26 - error TS2339: Property 'createFile' does not exist on type 'File'.
[ng] 67 return this.file.createFile(this.rootDirectory + dirName, fileName, true);
[ng] ~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:77:26 - error TS2339: Property 'writeFile' does not exist on type 'File'.
[ng] 77 return this.file.writeFile(this.rootDirectory + this.thumbFullPath, fileName, blob, { replace: true });
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:87:26 - error TS2339: Property 'writeFile' does not exist on type 'File'.
[ng] 87 return this.file.writeFile(this.rootDirectory + (dirName ? dirName : this.dirName), fileName, blob, { replace: true });
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:93:23 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 93 this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.thumbFullPath)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:110:27 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 110 this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.dirName)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:219:27 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 219 this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.dirName + dropboxFolder)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:258:26 - error TS2339: Property 'checkDir' does not exist on type 'File'.
[ng] 258 return this.file.checkDir(this.rootDirectory, dirName);
[ng] ~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:270:23 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 270 this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.dirName + dropboxFolder)
[ng] ~~~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:294:27 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 294 this.file.resolveLocalFilesystemUrl(this.rootDirectory + dirPath)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:297:43 - error TS2339: Property 'checkFile' does not exist on type 'File'.
[ng] 297 resolve(this.file.checkFile(dirEntry.nativeURL, filename));
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:307:30 - error TS2339: Property 'checkFile' does not exist on type 'File'.
[ng] 307 return this.file.checkFile(filepath, filename);
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:323:27 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 323 this.file.resolveLocalFilesystemUrl(this.rootDirectory + dirPath)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:326:54 - error TS2339: Property 'checkFile' does not exist on type 'File'.
[ng] 326 exists = await this.file.checkFile(dirEntry.nativeURL, filename);
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:337:46 - error TS2339: Property 'checkFile' does not exist on type 'File'.
[ng] 337 exists = await this.file.checkFile(filepath, filename);
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:499:52 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 499 var dirEntry = await this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.dirName)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:531:23 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 531 this.file.resolveLocalFilesystemUrl(filePath)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:536:31 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 536 this.file.resolveLocalFilesystemUrl(this.rootDirectory + dirPath)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:566:23 - error TS2339: Property 'resolveLocalFilesystemUrl' does not exist on type 'File'.
[ng] 566 this.file.resolveLocalFilesystemUrl(this.rootDirectory + this.dirName)
[ng] ~~~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:638:26 - error TS2339: Property 'writeFile' does not exist on type 'File'.
[ng] 638 return this.file.writeFile(path, filename, data, {replace:true});
[ng] ~~~
[ng] app/providers/files-system/providers/mobile-file.provider.ts:642:26 - error TS2339: Property 'readAsText' does not exist on type 'File'.
[ng] 642 return this.file.readAsText(path.match(/(.)[/\]/)[1]||'', path.replace(/^.[\/]/, ''));
[ng] ~~~~
[ng] app/services/editor.service.ts:255:27 - error TS2339: Property 'writeFile' does not exist on type 'File'.
[ng] 255 this.file.writeFile(this.file.externalRootDirectory + '/Download/', slide.name + '_slide.dsc', blob, { replace: true })
[ng] ~~~
[ng] app/services/editor.service.ts:255:47 - error TS2339: Property 'externalRootDirectory' does not exist on type 'File'.
[ng] 255 this.file.writeFile(this.file.externalRootDirectory + '/Download/', slide.name + '_slide.dsc', blob, { replace: true })
[ng] ~~~~~~~
[ng]

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 7.3.9
@angular/cli : 8.3.25
@ionic/angular-toolkit : 1.5.1

Capacitor:

Capacitor CLI : 1.2.1
@capacitor/core : 1.2.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 18 other plugins)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.13.1 (C:Program Filesnodejsnode.exe)
npm : 6.12.1
OS : Windows 10

[nanomorella]

@labmux
Do the following:

# 1. Uninstall plugin:

npm uninstall @ionic-native/file
ionic cordova plugin rm cordova-plugin-file

# 2. Install again:

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

# 3. Go to AppModule or the module where you want to import it and add

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

# 4. Add it to your providers

 providers: [  File  ]

# 5. Go to your component / page and use it

[RomanRobot]

Importing from @ionic-native/file/ngx fixed it for me. 🎉

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

was giving me that

error TS2322: Type 'FileOriginal' is not assignable to type 'Provider'.
Type 'FileOriginal' is missing the following properties from type 'TypeProvider': apply, call, bind, prototype, and 5 more.

error. What is ngx for?

[Sroose]

For whoever keeps having this issue: for me it mattered to put the import before the app routing module, then it was recognized as the File class. If I put it after that module, File was known as a const of the FileOriginal type..

[syepez]

For whoever keeps having this issue: for me it mattered to put the import before the app routing module, then it was recognized as the File class. If I put it after that module, File was known as a const of the FileOriginal type..

This was the solutions to my problem!!