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.
Related
Quick version:
expo init MyNewProject
cd MyNewProject
expo install react-native-maps
add import MapView from 'react-native-maps' to the top of my App.js, save/reload and I get the following error screen, along with this warning in the Expo Dev Tools
C:/Users/MyUser/Projects/current/MapTest/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
:
Long Version:
I created a brand new react-native app using expo, via expo init MyNewProject and chose a blank template. I then installed react-native-maps into my project directory as detailed here, https://docs.expo.io/versions/latest/sdk/map-view/, by running expo install react-native-maps. At this point I haven't touched the code, other than adding an import in my App.js for the MapView component import MapView from 'react-native-maps'. Now, when I save/reload the app, it dies. What's happening?? Am I missing something or is this a bug?
React Native Maps doesn’t support the web. You can use React Native Web Maps for the platform difference in the meantime.
Well, I am new to ionic 2 and build my first app having 2 pages and 2 services which are the very simple and for a news website.
The problem is, first I build my app for android using --release flag the file size was near 4MB and when I deploy on my mobile the load time was 14 - 17 seconds.
Then I search for 2 days to fix this issue and came up with the idea that I should enable production mode in main.ts and build using --prod flag . Now file size is 2.65MB and load time is 8 - 11 seconds which I think too much time for a mobile device. :(
My system information is:
ordova CLI: 6.5.0
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.10.0
Xcode version: Not installed
In my app I simply pulling news from rest server and displaying on my page. Am I doing something wrong or is there any issue with new version of ionic? I also read by some people that ionic 1 speed was good than the latest version.
Note: I run my app on 3 different devices the issue remain the same.
Check your config.xml, and set SplashScreenDelay value to zero
<preference name="SplashScreenDelay" value="0"/>.
For me, below command worked:
ionic cordova build ios --prod --aot --minifyjs --minifycss --optimizejs
You can use your own platform in above command instead of ios.
It decreased app load time in my case.
Please find more details here https://forum.ionicframework.com/t/ionic-app-takes-too-long-to-start/97546
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
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
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