IONIC 4 - Cordova file plugin

Ionic Native
1

Hello!
I’m currently trying an app on ionic 4 and i need to use the file plugin (https://ionicframework.com/docs/native/file/).

Here’s what i made:

  • Installed the required packages with ionic cordova plugin add cordova-plugin-file && npm install @ionic-native/file. Here’s the class below:
import { Injectable } from '@angular/core';
import { File } from '@ionic-native/file';

@Injectable({
  providedIn: 'root'
})
export class BaseModelService {
  constructor(private file: File) { }

  save(){
      return this.file.writeFile(this.file.dataDirectory, 'hello.json', JSON.stringify({test:'value'}), {replace:true})

  }
}

In my page class i after some logic i simply call

basemodelservice.save();

And i get the error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'writeFile' of undefined

What am i doing wrong? Thank you!

Edit: I was able to solve my issue. Here’s how:

I had to change the import from import { File } from ‘@ionic-native/file’; to import { File } from ‘@ionic-native/file/ngx’;

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/file/ngx';

@Injectable({
  providedIn: 'root'
})
export class BaseModelService {
  constructor(private file: File, private platform: Platform) {}

  async save() {
    await this.platform.ready();
    return this.file.writeFile(this.file.dataDirectory, 'hello.json', JSON.stringify({test:'value'}), {replace:true});
  }
}
2

Hi @ratedam,

You have to wait for the plugins to be ready before you can use them, by using platform.ready():

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/file';

@Injectable({
  providedIn: 'root'
})
export class BaseModelService {
  constructor(private file: File, private platform: Platform) {}

  async save() {
    await this.platform.ready();
    return this.file.writeFile(this.file.dataDirectory, 'hello.json', JSON.stringify({test:'value'}), {replace:true});
  }
}

Best,
Rodrigo

3

Hello Rodrigo,

Thank you for your amazing explanation however after impleting and adapting the code mentioned above i’m getting the following error:

Error: Uncaught (in promise): TypeError: Cannot read property 'ready' of undefined
4

Sorry, I wrote it from memory and missed a this. before. It should be await this.platform.ready();. I already corrected the example above.

5

Hello!

I noticed that you had forgotten the “this” and added it on my test code, so the problem remains even with the this.

6

Have you added import { Platform } from '@ionic/angular'; at the top and private platform: Platform in the constructor?

7

Hello,

Here’s my code

import { Injectable } from '@angular/core';
import { File } from '@ionic-native/file';
import { Platform } from '@ionic/angular';


@Injectable({
  providedIn: 'root'
})
export class BaseModelService {


  public data: any = [];

  constructor(private file: File, private platform: Platform) { }

  async save() {      
    await this.platform.ready();
    return this.file.writeFile(this.file.dataDirectory, 'hello.json', JSON.stringify({test:'value'}), {replace:true});
  }

}

Right now i’m getting the error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ready' of undefined

on this line: await this.platform.ready();

8

I was able to solve my issue. The solution is in the top!

Thank you!

1 Like
9

I’m glad you found the other problem. Cheers!