White screen after splash screen in Ionic2 - ionic2

I have small problem with white screen after execute splash screen when I convert my application to *.apk, Its take 20 to 25 seconds then my application run fine.
So is there any settings or codes or any tools that solves this problem?
Notes
~ Application size : 19mb
~ Tested on Samsung galaxy J7 2016 - android 7.0
~ I used this way to convert my app to apk : How to generate ionic apk or ios without extra applications?

by using
ionic build android --prod
The boot time will reduced to like 5 seconds and for the white screen,
the issue was Splash screen autohiding, so disable the splash screen auto hide and from
app.component.ts
i hid it manually.
config.xml
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
app.component.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:string = 'HomePage';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

To build your apk file just use:
ionic build android
(or) ionic cordova build android (In ionic3)
To run your app in device just use:
ionic run android (ionic cordova run android)
(or) ionic run android --livereload (for live reload) (ionic cordova run android --livereload)
See more about ioni cli
20s launch app is normal with debug mode. Run ionic build with --prod varible, you will see your app launch much faster but it take more time to build.

Related

Splash screen on Expo Standalone App is not same with Expo Client App

Configuration
I have an issue about splash configuration on Android in app.json.
It's fine if I run it on the Expo Client App but it's not after I build it as the standalone app.
I've tried as what is written on the link.
Here is my configuration :
"expo": {
...
"splash": {
"backgroundColor": "#4286f4",
"image": "./assets/images/splash/splash_full.png",
"resizeMode": "contain",
"tabletImage": "./assets/images/splash_full.png",
"hideExponentText": true
},
...
"android": {
"splash": {
"backgroundColor": "#4286f4",
"ldpi": "./assets/images/splash/splash_full.png",
"mdpi": "./assets/images/splash/splash_full.png",
"hdpi": "./assets/images/splash/splash_full.png",
"xhdpi": "./assets/images/splash/splash_full.png",
"xxhdpi": "./assets/images/splash/splash_full.png",
"xxxhdpi": "./assets/images/splash/splash_full.png",
"resizeMode": "contain",
"hideExponentText": true
},
}
...
}
RESULT
run on Expo Client App :
run on Expo Standalone App :
EXPECTED
Expo Standalone App should be same with Expo Client App
How it's​ possible?
I had the same problem with splash resizeMode='cover' on Android.
Following the advice in https://github.com/expo/expo/issues/4494 I upgraded expo-cli and the problem is gone.
To summarize:
Before SDK 33, expo-cli 2.x: worked well
When upgraded to SDK 33, still using expo-cli 2.x, displayed a small splash surrounded by black background
Upgraded expo-cli to 3.0.2, using sdk-33, works well

setRoot does not work after using SDK

Ionic version:
[ ] 3.X
Current behavior:
In my Application I have three options for login AWS Cognito Identity Provider , Google , facebook.
After successful login authentication when user moves to the Drivesetup Page, I set the Drivesetup Page as a root page (setRoot) but I'm facing a problem that user can easily go back again on login screen using mobile back button.
Expected behavior:
I am expecting that user can't go back to the login page by pressing mobile back button when I'm using setRoot to navigate the screen from login to dashboard.
Steps to reproduce:
Code Included.
GitHub Repo:-
https://github.com/saurabhschauhan/demoApp
Related code:
constructor(
public nav: Nav,
public app: App,
public navCtrl: NavController,) {
}
this.awsCredentialsService.login(data)
.then((awsCredentialsServiceResponse) => {
if (awsCredentialsServiceResponse['status'] == 'success') {
//navigate page
this.navCtrl.setRoot('DrivesetupPage');
//OR
//this.app.getRootNav().setRoot('DrivesetupPage');
//or
//this.nav.setRoot('DrivesetupPage');
this.toasterService.showToaster(email + `Logged in successfully`);
} else {
console.log('any other error');
}
})
Other information:
I had tried two more options this.app.getRootNav().setRoot('DrivesetupPage') and this.nav.setRoot('DrivesetupPage'); but both are not working for me.
Ionic info:
#ionic/cli-utils : 1.13.0
ionic (Ionic CLI) : 3.13.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 26.1.1
Node : v6.9.1
npm : 3.10.8
OS : Linux 3.16
Misc:
backend : pro
Thank you.

How can I use a Command to activate livereload in reload

I'm trying to figure out what are the commands or ways to reload my browser platform on every change detected with ionic or cordova because for me this lineis not working:
ionic run browser --livereload
So I'm wondering if you know how to do that. I'm using cordova plugins by the way.
Kind regards!
You can start your app in your browser with
ionic serve
This will refresh the app after every save. There were some build changes after the ionic rc2 release, so be sure to update to the latest version. That way it will even show you a loading toast, as well as give you a nicely formatted js error whenever your app fails to launch.
To update your project to the latest build version, update your package.json
{
...
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
...
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
}
You can find an example of a full package.json here: https://github.com/driftyco/ionic2-app-base
ionic serve is working fine for me.
for browser, ionic serve detect every change in code and refresh the page.
You can find some commands here:
https://ionicframework.com/docs/cli/serve/
on Cli, you may try npm run dev too. --> Runs ionic serve ( development ). it's short, concise, gets the job done most times. give it a try

Cannot find name 'cordova'. ionic build ios

I am using ionic2 build .
I did ionic plugin add cordova-plugin-file and used following code.
import {File} from 'ionic-native';
#Injectable()
export class GlobalVars {
constructor(platform:Platform) {
platform.ready().then(() => {
this.appRootFolder = cordova.file.documentsDirectory;
}
}
}
then I did ionic build android and I got this error
Cannot find name 'cordova'
After 2 hour of struggling , I resolved the issues by following commands
npm install -g typings
typings install dt~cordova --save --global
typings install dt~cordova/plugins/filesystem --save --global
This helped in building android , but still fails for iOS. when I run this ionic build ios I still get
Cannot find name 'cordova'
I wrote this line(declare var cordova:any;) at the top of file
import {File} from 'ionic-native';
declare var cordova:any;
And the problem is solved for me.
As of lately, you can do this:
In CLI, from your project folder:
ionic plugin add cordova-plugin-file
Then, in your component/class file:
import { File } from 'ionic-native';
declare var cordova: any;
const fs:string = cordova.file.dataDirectory;
File.checkDir(this.fs, 'mydir')
.then(_ => console.log('yay'))
.catch(err => console.log('boooh'));
Many native plugins are now well implemented and documented by the Ionic Team :)
Source: Ionic Native docs
Try copying cordova.d.ts file and plugins folder from here - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova230
And paste this folder and file in your project/typings directory.

How to debug ember integration test with Webstorm

I'm trying to debug a qunit ember integration test on Webstorm. Qunit is the same framework that ember is tested with.
Our test is similar to this:
import startApp from '../helpers/start-app';
var App;
module('Integration Tests', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, 'destroy');
});
test("Checking hub page",function(){
expect(2);
visit('/hub');
andThen(function(){
console.log(currentRouteName());
ok('in to the function');
});
});
I am trying these settings:
Edit------------------------------
I updated my run config but the application exits with the following error:
debugger listening on port 59771
version: 0.1.7
Could not find watchman, falling back to NodeWatcher for file system events
BuildingBuilding.Building..Building...Building...
Build successful - 1853ms.
c[?25l[8;NaNrtty.setRawMode: Use `process.stdin.setRawMode()` instead.
tty.js:37
throw new Error('can\'t set raw mode on non-tty');
^
You should have used ember to run your code. And you are running it as a simple node.js application (node foo-test.js). Moreover, Node won't accept EcmaScript 6 syntax unless being run with --harmony switch. Please make sure to update your run configuration accordingly (to run ember and pass your spec as a parameter to it)