Native transfer plugin - not available after install in ionic2 - ionic2

I have installed native TRANSFER plugin in my ionic 2 app in 2 steps:
1. ionic plugin add cordova-plugin-file-transfer
2. npm install --save #ionic-native/transfer
After that i imported the plugin in my home.ts page.
Import { Transfer } from '#ionic-native/transfer'
I tried to use the plugin to upload a file
var ft = new Transfer();
But i can't use ft var, because Transfer plugin look like it's not avalable.
If i write ft.upload () i receive an error like: Property 'upload' does not exist on type 'Transfer'.
My technologies:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
In the previous version of my app when using Ionic Framework Version: 2.0.0-rc.5 /Ionic App Scripts Version: 1.0.0 all worked just fine.
Does anyone has any solution for this?
Thanks in advance.

In the 3.1.0 version of Ionic Native,
you have to use the plugin like a provider.
Import it in app.module.ts and set as provider
import {Transfer} from '#ionic-native/transfer'
#ngModule({
//...
providers:[
Transfer,
..]
Inject in the component/provider where you need to use it.
constructor(private fileTransfer:Transfer){}
Use the fileTransfer object.
Documentation: Ionic Native and Transfer

Related

ionic cordova plugin add cordova-plugin-advanced-http already installed

I am new on Ionic Mobile application development, so I am trying to POST data from Ionic app. Whenever I have run the app in browser using
ionic cordova run browser
It display below issue in console,
Native: tried calling HTTP.post, but the HTTP plugin is not installed.
Install the HTTP plugin: 'ionic cordova plugin add cordova-plugin-advanced-http'.
I have installed same plugin using terminal but terminal give warnings as its already installed.
Please Suggest.
Based on this https://ionicframework.com/docs/native/http/ you also need to run
npm install --save #ionic-native/http
and referencing it correctly in your app, please take a look at above link
Also for running app in browser try below command
Ionic serve
See https://github.com/ionic-team/ionic-native/issues/1975
The issue appears to have been fixed but there might be a lag in updating npm
I hade the same problem and I solve it with uninstall and reinstall the plugin
Uninstall plugin completely
ionic cordova plugin remove cordova-plugin-advanced-http
npm uninstall #ionic-native/http
and reinstall it
ionic cordova plugin add cordova-plugin-advanced-http
npm install #ionic-native/http
The Native Http plugin is the only way to handle the CORS from the client-side.
The way I see your problem, there might two possible fixes
Check whether the plugin is called after the platform.ready().
Even after it, if doesn't work or show the same error then follow this method.
// Declare cordova as a global constant
declare const cordova;
// directly call the cordova pulgin using "cordova.pulgin.http"
cordova.plugin.http.post(apiUrl, {}, {},
response => {},
response => {})

How to reduce Ionic2 app load time

I am currently developing an Ionic2 app.
My app has
- Total 29 Pages
My plugins are
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 4.3.2 "File"
cordova-plugin-file-transfer 1.6.2 "File Transfer"
cordova-plugin-network-information 1.3.2 "Network Information"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
cordova-sqlite-storage 2.0.2 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
config.xml is almost default set.
I do npm run ionic:build --aot + ionic prepare android --prod --release, after that I create signed apk from android studio.
My app start time is 9-10 seconds.
How can I reduce it.
Please advice.
There is an ongoing discussion on the forums about this painfull issue
For now, the possible steps may help:
Hiding the splashscreen manually and disable autohide
Shrink the code with rollup, make sure to build for production
Adding lazy loading of some elements
Upgrading to newer ionic version 3+ which brings angular4

Loading app taking too long

I've build an small/simple app with ionic 2.
But when I try open it on my phone it takes more than 10 seconds to load.
I don't know if this is an ionic2 issue for or has something to do with my code.
I tried using enableProdMode(); but I get the same result: 10 second for loading.
my main.ts
{
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import {enableProdMode} from '#angular/core';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
}
My technologies:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
Is there a way to lower the loading time for my app?
Thanks in advance.
Did you built it like that: ionic build android --prod --release (or whatever platform you are using)? This should produce the best results.

Ionic 2 Camera makes app crash

When i use the camera button that should launch the camera on my android device it gives me this error with chrome inspect:
file:///storage/emulated/0/Android/data/io.ionic.starter/cache/.Pic.jpg exposed beyond app through ClipData.Item.getUri()
I am clueless, can't find it anywere..
All help is appreciated!
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed
Passing in Width and Height solves the crashing issue for me.
const options: CameraOptions = {
quality: 100,
targetWidth: 100,
targetHeight: 100,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE
}
Camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.idImage = imageData;
this.idImageSelected = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
got this solved updating cordova platform android to be 6.1.1 and then updating the camera plugin.
check your android cordova platform version:
cordova platform ls
if android is 6.0 < then you need to update it and add the updated version to your project, this should work:
cordova platform update android
but in my case it won't update the android platform version so I had to explicitly install 6.1.1
cordova platform add android#6.1.1 --save
then it updated to 6.1.1 and I then removed and added cordova camera plugin to my project:
cordova plugin remove cordova-plugin-camera --save
and then
cordova plugin add cordova-plugin-camera --save
an up to date cordova-plugin-camera was then installed and I could see it in my config.xml
I've deployed my app to device again ionic run android and it worked.
I do with this options : run well in Android device
doCamera() {
Camera.getPicture({
destinationType: Camera.DestinationType.FILE_URI,
saveToPhotoAlbum: true,
mediaType: Camera.MediaType.PICTURE,
}).then((imageURI) => {
this.changeImageString(imageURI);
}, (err) => {
console.log("Error: " + err);
});
}
see enter link description here
Ionic Info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.38
Node Version: v6.8.1

Why PWA ServiceWorker don’t work for me with Ionic 2?

I am having great difficulty in operating the ServiceWorker with ionic 2.
I start a new project with ionic this:
$ Ionic start pwa-project blank --v2
The default structure created by the ionic me two important folders:
- src
- www
In both there are the files:
- Index.html (where I have to uncomment the call to service-worker)
- Manifest.json (which set up the data from my app)
- Service-worker.js (the my service worker itself)
The logic for developers in ionc is not touching anything in the www folder and only work in the src folder. And I did, ran the $ ionic serve and started to edit my html, service-worker and manifest, all in the src folder. But I noticed that the changes are not reflected on the same files in the www folder.
Restarted the $ ionic serve and nothing happened.
All right, then I proceeded to edit these three files directly in the www folder to Activate from my service-worker.
This time I came across another problem. The service-worker does not run.
The script invokes the service-worker in the index.html file prints to the console the success message "service worker installed" confirming that it was installed, but I wrote some console.log() in my service-worker of events and these events are not fired, and I can not say why.
console.log ( '[SERVICE WORKER] Install');
console.log ( '[SERVICE WORKER] Activate');
console.log ( '[SERVICE WORKER] Fetch');
None of these is displayed on the console, which makes me believe that the service-worker for some reason, is not running.
In Chrome DevTools, Application pane, appears that the service-worker is installed and enabled.
Has anyone experienced this problem? Managed to solve?
PS .: When I create a project in vanilla javascript everything works fine, the service-worker is installed, running and messages are usually displayed on the console, which makes me believe that there is any interference Ionic (v2).
My Ionic info is:
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS: Distributor ID: elementary OS Description: elementary OS Freya
Node Version: v5.12.0
Late to the party, but for my current setup, all is working fine:
cli packages: (/home/khophi/Developments/Ionic/KhophiPwa/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
Android SDK Tools : 26.0.2
Node : v7.10.1
npm : 4.2.0
OS : Linux 4.10