Hi, I'm trying to make a file explorer for android on ionic 3 by following a tutorial ( link ) and it does not work for me. Use ionic v3.20.0 cordova v8.0.0 npm v5.6.0 node v8.11.1
I install the cordova plugin
ionic cordova plugin add cordova-plugin-file
No error. Install:
npm install --save @ionic-native/file
This gives a problem with a dependency (I do not know if it has something to do):
PS D:\Trabajo\Ionic\Proyecto\myApp> npm install --save @ionic-native/file
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @ionic-native/[email protected]
updated 1 package in 9.61s
In app.modules.ts I add the File plugin
providers: [File,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
This is prueba.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { File } from '@ionic-native/file';
/**
* Generated class for the PruebaPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-prueba',
templateUrl: 'prueba.html',
})
export class PruebaPage {
nativepath: string;
applicationDirectory='';
applicationStorageDirectory='';
dataDirectory='';
cacheDirectory='';
externalApplicationStorageDirectory='';
externalDataDirectory='';
externalCacheDirectory='';
externalRootDirectory='';
tempDirectory='';
getFreeDiskSpace:any='';
constructor(public navCtrl: NavController, public navParams: NavParams, private fileCtrl: File) {
this.goToDir();
}
ionViewDidLoad() {
console.log('ionViewDidLoad PruebaPage');
}
public goToDir()
{
this.applicationDirectory=this.fileCtrl.applicationDirectory;
this.applicationStorageDirectory=this.fileCtrl.applicationStorageDirectory;
this.dataDirectory=this.fileCtrl.dataDirectory;
this.cacheDirectory=this.fileCtrl.cacheDirectory;
this.externalApplicationStorageDirectory=this.fileCtrl.externalApplicationStorageDirectory;
this.externalDataDirectory=this.fileCtrl.externalDataDirectory;
this.externalCacheDirectory=this.fileCtrl.externalCacheDirectory;
this.externalRootDirectory=this.fileCtrl.externalRootDirectory;
this.tempDirectory=this.fileCtrl.tempDirectory;
this.fileCtrl.getFreeDiskSpace().then(data=>{
this.getFreeDiskSpace=data;
})
}
}
This is test.html
<!--
Generated template for the PruebaPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Directorio</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3>File Directory Info</h3>
<ion-list>
<ion-item text-wrap>
<div class="name">applicationDirectory </div>
<div class="value">{{applicationDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">applicationStorageDirectory </div>
<div class="value">{{applicationStorageDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">dataDirectory </div>
<div class="value">{{dataDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">cacheDirectory </div>
<div class="value">{{cacheDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">externalApplicationStorageDirectory </div>
<div class="value">{{externalApplicationStorageDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">externalDataDirectory </div>
<div class="value">{{externalDataDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">externalCacheDirectory </div>
<div class="value">{{externalCacheDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name"> externalRootDirectory</div>
<div class="value">{{externalRootDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name">tempDirectory </div>
<div class="value">{{tempDirectory}}</div>
</ion-item>
<ion-item text-wrap>
<div class="name"> getFreeDiskSpace</div>
<div class="value">{{getFreeDiskSpace}}</div>
</ion-item>
</ion-list>
</ion-content>
This is what the browser shows when you insert the command ionic serve: