I'm struggling since days with the livereload functionality on my Ionic 5 / Capacitor app. I get on the simulator a white screen after the build is reload, i.e. after a change in the code. When I run the app first time under command "ionic capacitor run ios -l" the app loads perfect in the iOS simulator. After a change in the code I see on CLI that this was compiled successfully. However, in the simulator I stuck on a white screen. I tried many solutions indicated on the web, still having this issue. Is this a known bug on Ionic 5 using capacitor or do you have any idea what could help?
My capacitor config file looks like this:
appId: 'xxxx',
appName: 'xxxx',
webDir: 'www',
bundledWebRuntime: false,
cordova: {
preferences: {
scheme: 'app',
hostname: 'localhost',
ScrollEnabled: 'false',
BackupWebStorage: 'none',
AutoHideSplashScreen: 'false',
SplashMaintainAspectRatio: 'true',
FadeSplashScreenDuration: '200',
SplashShowOnlyFirstTime: 'false',
SplashScreen: 'screen',
SplashScreenDelay: '1000',
loadUrlTimeoutValue: '70000',
ShowSplashScreenSpinner: 'false',
}
}
};
this worked for me:
Option 1: Turn off your VPN if you are using a VPN either on your desktop or your mobile or even both of them.
Option 2: Turn off your windows firewall.
Related
I am trying to debug an Ionic 4 app using Appium & WebdriverIO. I am receiving feedback that I need to enable Webview in my app in order for this to work. The problem is I cannot find a single reference as to how to do this in Ionic anywhere.
I have also attempted to run my app in Browserstack where for the same reason, it won't run at all.
Can someone from Ionic comment on the correct approach to this, that will work for Android and iOS platforms, based on the same Ionic code.
The solution comes in a few steps.
1 - Enable Webview
In the config.xml file, make sure you set the following:
<preference name="WKWebViewOnly" value="true" />
This has the effect of setting :
<application
android:debuggable="true"
2 - Debug Build
In addition to point 1, note that for a production release build, we use the command :
$ ionic cordova build android --prod --release
However, Android does something clever behind the scenes in that this build can only be debugged locally for security reasons. So, no matter what you do, when you try and run this up in Browserstack, it will not provide webview as a context. We fix this by using the debug build flag:
$ ionic cordova build android --prod --debug
3 - Bonus Bug
Unfortunately, there is a bug in the Android Debug build process. So there is one more step to cover. You have to run zipalign twice when you're working on the debug build. Don't ask me why! You just do...
Debug > "%ANDROID_HOME%\build-tools\28.0.3\zipalign" -f 4 app-debug.apk temp.apk // zip-align
Debug > "%ANDROID_HOME%\build-tools\28.0.3\zipalign" -f 4 temp.apk SensorNode.apk // need to do it twice because of android bug!!!
Debug > "%ANDROID_HOME%\build-tools\28.0.3\apksigner" sign --ks my-release-key.jks --v1-signing-enabled true --v2-signing-enabled true SensorNode.apk
I have searched all over to get this answer but nothing works.
I am building an iPad app in Ionic 2 that uses various native plugins.
I want to be able to test the native features and observe the console logs but nothing gets logged, using either the ios emulator or an iPad device.
Ideally I also want livereload but I'll take what I can get.
I eventually got to display console logs in Xcode but that involves running
cordova platform prepare
then running the process from Xcode manually every time I make a single edit. This takes much longer than
ionic cordova run ios --target="iPad-Air" -c
Why can I not just see the logs when I use run?
I have looked at where it says the console.log file is saved to but no file gets created. I created the file myself and gave it full 777 permissions and still nothing.
ionic info:
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.0.1
Cordova Platforms : browser 5.0.3 ios 4.5.2
Ionic Framework : ionic-angular 3.7.1
System:
ios-deploy : 1.9.2
Node : v8.8.0
npm : 5.4.2
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
To help anyone else who has trawled the forums and tried all the solutions where it seems everyone else can console.log except you, I will post what I have discovered. This is not a total solution but may identify the cause for some.
I was specifying the target as iPad-Air. When I didn't, the simulator started in iPhone-6. That is not what I wanted but there in my console was a very welcome console log message.
So I experimented a little and found that iPad-Air 10.0 and iPad-Air-2 10.0 and above will log to the console but 9.3 and lower (Not tested exhaustively) would not.
So for me, this solution will let me continue to develop with livereload and console logs and what's left of my hair.
Hopefully it will save someone else's hair loss too.
FYI you can set your chosen device as a project default in platforms/ios/cordova/lib/run.js in the deployToSim function. There should be a line like if (emulator.indexOf('iPhone') === 0) { swap out 'iPhone' (or whatever it is for you) and replace it with 'iPad-Air-2, 10.0' or whatever you need and have available in your simulator list. ios-sim showdevicetypes
Good luck!
I have developed ionic 2 calendar app. when start this app via phone it gets white screen for a while like 1 min first and take more time to start my app. How to solve this issue.
Try running the app in production mode to speed up and optimize the start of your application
If you're in an ionic 2 app, you can enable this by doing the following,
open src/app/main.ts
Import enableProdMode from Angular 2 core
import {enableProdMode} from '#angular/core';
import { AppModule } from './app.module';
Then call the enableProdMode() function before bootstraping your module
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
and now while running the app through cli try adding a flag like "--prod"
ionic run android --prod
In ionic 3.x, you don't have to enable anything in the code. you can simply run it using the cli command,
ionic cordova run android --prod
check this documentation from angular.io
Hope that helps
I'm getting a UnsupportedOperationError: Build info: version: '3.3.1', revision: '5234b32', time: '2017-03-10 09:04:52 -0800' when i run my protractor 5.0.0 tests on safari.
I have a webdriver 2.48.0 extension enabled in safari.
conf file:
capabilities: {
name: 'Safari',
browserName: 'safari',
logName: 'Safari',
shardTestFiles: true,
maxInstances: 2
}
seleniumAddress: 'http://localhost:4444/wd/hub'
I'm starting the server manually by
./node_modules/.bin/webdriver-manager start
and running the spec in a different terminal
Am I supposed to run a specific version of selenium server. Any help would be appreciated.
macOS Sierra with Safari 10.0.2 needs the new Safari Driver. The Safari webdriver 2.48.0 extenson is for Safari 9 and lower.
There are some issues with the new Safari driver, see also here and search Google ;-).
Keep in mind that for example the Wait For Angular doesn't work, to avoid that use browser.ignoreSynchronization = true;
i'm using Protractor + Jasmine + Selenium WebdriverJS for automating angularjs application. I was able to configure and setup a sample script with all these tools to run on a desktop computer.
Now I want to run the same scripts on mobile( IOS & Android ) device / emulator.
I'm looking to use appium to run protractor scripts on IOS and Android. If anyone who has worked on protractor and appium. Please help me set up a sample script.
i'm pretty new to all these tools any Info on this is really helpful.
at https://github.com/angular/protractor/blob/master/docs/browser-setup.md you can find very detailed informations how to setup appium with protractor to test on emulators (Android/iOS)
you have to replace the webdriver of protractor with the appium webdriver. the appium webdriver is running normally at port 4723. the folloing code is for android for a web-only angualr app (no apk, pure web, running in the cromebrowser of the device which must be present)
exports.config = {
seleniumAddress: 'http://localhost:4723/wd/hub', //appium
specs: [
'spec.js'
],
capabilities: {
browserName: 'chrome',
'appium-version': '1.0',
platformName: 'Android',
platformVersion: '4.4.2',
deviceName: 'Android Emulator',
},
baseUrl: 'http://yourwebsite.com'),
};
start appium and run test with
protractor yourtest.js
edit: adapting capabilities to recent version (browserName must be present for selenium 2.43.x)
Have you tried using SauceLabs? I think you can request iOS and Android devices by specifying the platform in the capabilities section of the config.
If you don't want to use SauceLabs you can look at using Selenium's Grid functionality. You can get Selenium drivers for iOS and Android and have them connect to a centralized Selenium server that your Protractor scenarios are ran against, you just change the seleniumAddress in your config file to point to the centralized server.
Basically, you have to connect to the devices remotely and the easiest ways are as stated above.
just wanted to share that this configuration worked for me against BrowserStack.-
multiCapabilities: [
{
platformName: 'iOS',
platformVersion: '7.1',
browserName: '',
app: 'safari',
deviceName: 'iPhone Simulator',
'appium-version': "1.4.0",
username: '<username>',
accessKey: '<key>'
}
,
{
platformName: 'Android',
platformVersion: '4.4',
browserName: 'Browser',
deviceName: 'Android Emulator',
'appium-version': "1.4.0",
username: '<username>',
accessKey: '<key>'
}
],
I've found that other values for platformVersion different that the ones that I placed here, does not work, you'll get this error message like: 'Angular was not found....'
I've created a ticket for protractor team and a comment:
https://github.com/angular/protractor/issues/2247