Ionic-framework: Ionic 4 project breaks when importing/using ionic-native/file

[hansprueller]

Bug Report

Ionic version:
[x] 4.0.0-rc.1

Current behavior:
Started a blank "starter" project (tabs). Added a service class. everything works fine, I can run the starter project with "Ionic serve".
As soon as I import:
import { File } from '@ionic-native/file';
in the class and add a File via dep. injection to the constructor, e.g.:
constructor(private file: File)
{
..
}
without doing anything with the file, just added -> the project breaks. When trying to run with "ionic serve" it compiles like a charme, but the browser window stays blank and there are javascript errors in the browser console (TypeError: Object(...) is not a function)

I also tried to install rxjs-compat package because I thought it would probably be a version/dependency conflict of rxjs (ionic-native/file requires rxjs4, ionic4 angular projects come with rxjs 6....) - but that didn't change anything.

Expected behavior:
Project should not break when using ionic-native file.

Steps to reproduce:

• create a new project by using a starter template "ionic start tabs"
• add/generate additional service ionic generate service _services/Test
• import native/file in this service class: import { File } from '@ionic-native/file';
• add a file to the constructor of the service:
  constructor(private file: File) //private file: File)
  {
  ..

Related code:
n/a

Ionic info:
Ionic:

ionic (Ionic CLI) : 4.10.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.3.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 6 other plugins)

System:

ios-sim : 5.0.3
NodeJS : v11.4.0 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61

[LuizTokuhara]

Have you tested to import like this:
import { File } from '@ionic-native/file/ngx';
And see if it breaks too?

[untilbit]

@hansprueller You are importing File for Ionic 3. Import it for v4 adding /ngx like @LuizTokuhara wrote.

[hansprueller]

Hi @LuizTokuhara and @untilbit !
Thanks for your comments. I build the code sticking to Ionic documentation, when Ionic v4 was still beta - but that was the import statement I found for using native/file.

Where can I find the correct imports? Currently, the only documentation to ionic-native/file I can find is here: https://ionicframework.com/docs/native/file/ but there is no code sample or anything else that would tell me the correct import?

BUT anyway, I changed the import and unfortunately I am still having the same problem:

Import is now:
import { File } from '@ionic-native/file';

and I am doin'g nothing more than adding a file: FIle object "injected" in the constructor of my service class.

Do I have to change/adapt anything else ?

Did you mean I still should use rxjs-compat AND this changed import? Because rxjs-compat is (currently) removed from the project as it did not help...

thanks a lot!
hans

[LuizTokuhara]

Hi, you just have to add "/ngx" for ionic v4 at the end, like this:
import { File } from '@ionic-native/file/ngx';

[LuizTokuhara]

Docs - https://ionicframework.com/docs/native/#angular

[hansprueller]

Thanks for the link to the docs, obviously I did not (yet) see this for using native-file with Ionic v4.

I changed the import now to:
import { File } from '@ionic-native/file/ngx';

But I have the problem, that the import does not work now: "cannot find module ... (ts2307)"

Also re-installed the cordova plugin with:
ionic cordova plugin add cordova-plugin-file

and updated the project by using:
npm update

but that did not help.

Any idea what the problem could be?

[LuizTokuhara]

Thats weird... What I did here was:
1 - installed file plugin;
2 - installed ionic native file;
3 - imported in app.modules.ts and declared in providers;
4 - imported in home.page.ts and it was good to go.

[untilbit]

@hansprueller

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

[hansprueller]

@untilbit
Thanks for the tip. That helped! Although I don't know why? Because basically, I did exactly the same steps when I added the File stuff to my project:

• installed the cordova file plugin
• installed the ionic-native-file package
• imported the module

The @ionic-native/file was found, but did not work. @ionic-native/file/ngx was not found.

After I removed and re-installed everything, it works now!

Could it be a problem because the project was started with Ionic 4 beta some weeks ago?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.