Ionic FileTransfer not working on iOS - broken plugin?

Ionic Framework ionic-v3
1

Hey all! I am trying for two days now, to upload a file to my server. Here is my config:

Ionic: CLI 4.7.1
Cordova: 8.1.2 (cordova-lib@8.1.1)

I have added the following:

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

Afterwards I did put it within the app.module.ts like this:

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

[... shorten ...]

  providers: [
    ....
    File,
    FileTransfer,
    Base64,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

and within my page I added the following:

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

  constructor(public navCtrl: NavController, [..], private base64: Base64, public http: HttpClient, private transfer: FileTransfer) {

  }

I even did not implement code but when I try to run:

ionic Cordova build iOS

I do get the following error:

[18:55:27]  typescript: src/app/app.module.ts, line: 24 
            Argument of type '{ declarations: (typeof AboutPage | typeof ContactPage | typeof HomePage | typeof TabsPage 
            | type...' is not assignable to parameter of type 'NgModule'. Types of property 'providers' are 
            incompatible. Type '(typeof SplashScreen | typeof Camera | typeof Media | typeof File | typeof Base64 | 
            FileTransferO...' is not assignable to type 'Provider[]'. Type 'typeof SplashScreen | typeof Camera | typeof 
            Media | typeof File | typeof Base64 | FileTransferOr...' is not assignable to type 'Provider'. Type 
            'FileTransferOriginal' is not assignable to type 'Provider'. Type 'FileTransferOriginal' is not assignable 
            to type 'ClassProvider'. Property 'provide' is missing in type 'FileTransferOriginal'. 

      L24:  @NgModule({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
      L25:    declarations: [


[ ,,, ]

[18:55:27]  ionic-app-script task: "build" 
[18:55:27]  Error: Failed to transpile program 
Error: Failed to transpile program
    at new BuildError (/Users/marie/playground/ionic/AppDevelopment/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /Users/marie/playground/ionic/AppDevelopment/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
    at new Promise (<anonymous>)
    at transpileWorker (/Users/marie/playground/ionic/AppDevelopment/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
    at Object.transpile (/Users/marie/playground/ionic/AppDevelopment/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
    at /Users/marie/playground/ionic/AppDevelopment/node_modules/@ionic/app-scripts/dist/build.js:109:82
[ERROR] An error occurred while running subprocess ionic-app-scripts.

This error seems to be common but no-one did post a solution yet. Most of the references I found on Stackoverflow say - it is due to a deprecated plugin? Is this FileTransfer Plugin deprecated?

https://stackoverflow.com/questions/46068697/ionic-fileuploadoptions-throw-error-when-add-to-app-module-ts (This did not work for me)

Thanks

2

which version of plugin you using? and is it working in android?

3

I have not tested it on android because I am just developing for iOS. First I ve thought maybe a ionic 4.7 issue. Than I Downgraded to 3.9.2 and installed the plugin. I get the following warning:

npm WARN @ionic-native/file-transfer@5.0.0 requires a peer of @ionic-native/core@5.0.0 but none is installed. You must install peer dependencies yourself.

But I really don t how to install these dependencies and if they are working with my version? This seems to be a wired versioning jungle.

4

Well I did run ncu and get the following:

 @angular/animations                  5.2.11  →   7.2.3 
 @angular/common                      5.2.11  →   7.2.3 
 @angular/compiler                    5.2.11  →   7.2.3 
 @angular/compiler-cli                5.2.11  →   7.2.3 
 @angular/core                        5.2.11  →   7.2.3 
 @angular/forms                       5.2.11  →   7.2.3 
 @angular/http                        5.2.11  →   7.2.3 
 @angular/platform-browser            5.2.11  →   7.2.3 
 @angular/platform-browser-dynamic    5.2.11  →   7.2.3 
 @ionic-native/base64                ^4.20.0  →  ^5.0.0 
 @ionic-native/camera                ^4.19.0  →  ^5.0.0 
 @ionic-native/core                  ^4.18.0  →  ^5.0.0 
 @ionic-native/file                  ^4.19.0  →  ^5.0.0 
 @ionic-native/http                  ^4.19.0  →  ^5.0.0 
 @ionic-native/image-picker          ^4.19.0  →  ^5.0.0 
 @ionic-native/media                 ^4.19.0  →  ^5.0.0 
 @ionic-native/splash-screen         ~4.18.0  →  ~5.0.0 
 @ionic-native/status-bar            ~4.18.0  →  ~5.0.0 
 cordova-plugin-ionic-webview         ^2.3.1  →  ^3.1.1 
 cordova-plugin-telerik-imagepicker    2.2.2  →   2.2.3 
 ionicons                              3.0.0  →   4.5.5 
 rxjs                                 5.5.11  →   6.4.0 
 zone.js                              0.8.26  →  0.8.29 
 @ionic/app-scripts                    3.2.1  →   3.2.2 
 typescript                           ~2.6.2  →  ~3.2.4

Than I run ncu -u to update all:

All dependencies match the latest package versions :)

Than I tried installing it again:

npm install @ionic-native/file-transfer

And now I get even more warnings…

npm WARN @ionic/storage@2.2.0 requires a peer of @angular/core@* but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/storage@2.2.0 requires a peer of rxjs@* but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/file-transfer@5.0.0 requires a peer of rxjs@* but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/file-transfer@5.0.0 requires a peer of @ionic-native/core@5.0.0 but none is installed. You must install peer dependencies yourself.

+ @ionic-native/file-transfer@5.0.0
updated 1 package and audited 151 packages in 1.54s
found 0 vulnerabilities

well is this really normal for a build system like ionic?? Can someone please explain me, why the actual plugins need to be installed manually and even how do I install them? I am getting tilted…

5

i think you should import it with ngx
like import {’…’} from your plugin name/ngx

or if you are using ionic 3 and ionic script 3.2.x then install file transfer plugin with 4.16 version

1 Like
6

Well I have updated again to the newest versions (ncu -u, npm install and so on) and Yeah! You posted the SOLUTION!!! THANK YOU! :slight_smile:

Within the app.module.ts I had to enter:

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

But please Ionic Team!? What is this!? I am reading the official documentation follow every step on this and had to magically append a /ngx at the end? Should I open a bug report for this? Because I have seen it by many people unresolved…

7

Honestly the Plugin is still not working. When I Upgrade to version 5.0. All my other plugins will crash. Very well dependencies. Also figured out, that the plugin itself might cause problems: https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html

I am not sure if this is an ionic or Cordova issue. I will rewrite my whole code and also recommend others to do so.