ionic blank screen with the run command - angularjs

I've been developing an app with ionic for a week with the
//working flawlessly
ionic run --device --livereload --consolelogs
and it has been flawless the whole time since I started to remove the last 2 arguments
//blank screen of death
ionic run --device
(ionic serve is working well too, without console errors)
After the splashscreen, it's now giving me a blank screen without any errors in the console and i've been debugging this for the last 6 hours without success. I know there's plenty of solutions out there but none of them seems to work for me.
Seems like --livereload is feeding the root www folder while the default run command is feeding the platforms folder www (maybe that's a clue).
Here's my ionic info
Cordova CLI: 5.4.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 1.7.10
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v0.12.2
Xcode version: Xcode 7.1.1 Build version 7B1005

... I just found out my problem. Apparently loading librairies from a CDN was the problem. Just downloaded all CDN's librairies that I was using into the lib folder and everything is now loading fine.

This can also happen when you have a <base href="/"> in your index.html, which allows livereload to work but prevents bundled apps from loading files.

Related

Error: $compile:tplrt: Cannot render page after compiling AngularJS with WebStorm on Windows

I am currently pretty lost where to start searching for the error that I am facing. The same AngularJS project that my colleagues have been working on for quite a while on Macs cannot be compiled correctly on my Windows machine. No idea if windows and mac has anything to do with the error but just in case I am adding this information.
I've checked out the project with SourceTree and opend it with WebStorm.
First npm install then gulp dev in the terminal of WebStorm and my angularJs-project is beeing compiled without any errors. When then the browser windows with //localhost is beeing opened, the page shows shortly the loading anymation and then stays blank.
In the attached screenshot you can see the output of the console. Any ideas?
AngularJS Version: 1.7.2
NPM Version: 5.6.0
Gulp:
CLI version 3.9.1
Local version 3.9.1
What could make the difference that the project is running perfectly on other machines but not on mine?
[Edit]:
I have now reanimated my old macbook, checked out the exact same project with source tree, installed webstorm, ran npm install, then doing this to set up gulp and then running gulp dev: The App runs just fine.
On my Windows Laptop I've started all over, deinstalled WebStorm, deinstalled node.js and did the whole set up as described above. Only difference that I need to install node.js manually on Windows to use npm.... same error as described before.

JS Error for Angular and Nativescript project

Current behavior
When I try to run the application using tns run ios , it gives me the following error.
attached picture shows the JS Error in the terminal
Expected behavior
The app should boot up without the JS error just like the web application.
Minimal reproduction of the problem with instructions
git clone "name of the repository"
npm i
cd nativescript
npm i
tns run ios
It installs the app successfully , however, the app doesn't open. On manually opening the app, it gives a JS error.
What is the motivation / use case for changing the behavior?
To get the web and mobile running at the same time.
Please tell us about your environment:
Operating system : MAC OS (Tried it on windows too) 16GB RAM
package manager : npm, tns
**Angular Seed Version: 8aae926
Node: node --version = v8.11.3

how to resolve this ERROR running one or more of the platform when i am runnning "ionic run android --device"

$ ionic run android --device
Running command: "C:\Program Files\nodejs\node.exe" C:\Users\user\Desktop\transroads\jvdappNew\jvdApp\hooks\after_prepare\010_add_platform_class.js C:/Users/user/Desktop/transroads/jvdappNew/jvdApp
add to body class: platform-android
ERROR running one or more of the platforms: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.
You may not have the required environment or OS to run this project.
It was working properly but when i updated my Android Studio there is installed another SDK also now i am having two SDK in the ANDROID_HOME path those are SDK and SDK1. SDK is having API23 and SDK1 API24.
whenever i am running command "ionic run android --device" terminal always shows that error i have discuss above.
Before update of Android Studio everything was working properly but after the update i am unable to run ionic application on my mobile device.ANDROID_HOME path is C:\Users\user\AppData\Local\Android\sdk; and i am having SDK1 folder also after the Android Studios updation on that location.
AVD Manager.exe and SDK Manager.exe those files are only in SDK and SDK1 having nothing like that.Please help me out of this.
Anyone please tell me both the platform can run over a SDK Manager?
You need to update your cordova android platform. Basically the older version till 6.2.0 used android command which is deprecated in the SDK.This was patched in 6.2.0
Check this answer for more info.
Update your cordova cli first:
npm install -g cordova#latest
You can update to the latest platform by doing:
ionic platform add android#6.2.3
Or
ionic platform add android#latest
For IONIC CLI v3 the command is:
ionic cordova platform add android#latest

Splashscreen wrong since XCode 7

I took over a project using AngularJS, Ionic and Bootstrap to create hybrid apps for mobile devices.
Prior to upgrade to XCode 7 all went well. I updated my HTML-, CSS- and JS-code in editor, ran grunt run:ios to create platform code and opened XCode. From there I built the .ipa-file without any issues (justwith some warnings, which could be ignored).
However since using XCode 7 (needed for iOS 8- and iOS 9-devices), the splascreen will be shown incorrectly. Meaning: Rotated with 90°.
Note #1: The splashscreen and the app have to be Landscape-only.
Note #2: When running grunt run:android, all is well on the Android-based device.
Any idea what to do in order to get the old correct state again?
There is a known bug in the cordova-plugin-splashscreen plugin relating to your issue ( Issue CB-10244 ). Try to update this plugin to cordova-plugin-splashscreen#3.1.0 by re-adding it:
cordova plugin rm cordova-plugin-splashscreen
cordova plugin add cordova-plugin-splashscreen

Infinite digest loop in Ionic Apps after latest XCode update (iOS only)

I have an Ionic app that I usually debug using Safari's javascript console attached to the iOS simulator. A few days ago, not sure exactly when, but I think it was around the time XCode pushed out their latest update, I started getting the following message in Safari's console output whenever I click a tab to change states:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
This causes the app to lag, and sometimes crash. I reverted my code to earlier and earlier states with no resolution, so I tried creating an Ionic app from scratch:
ionic start throwaway
cd throwaway
ionic run ios
...and sure enough, the issue was still there. I'm trying everything to no avail. Here's the output of ionic info:
Your system information:
Cordova CLI: 5.2.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: Not installed
ios-sim version: 4.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.2
Xcode version: Xcode 7.0 Build version 7A220
The problem does not occur on Android, just iOS.
Thanks for your help!!
Found the answer! Apparently iOS9 breaks everything. Luckily, Ionic's team saw this coming: http://blog.ionic.io/ios-9-potential-breaking-change/
Install the referenced Angular patch manually. You can also update to Angular 1.4.6 as it includes the patch, but I couldn't find an easy way to do this on Ionic as it comes bundled with Angular 1.4.3.

Resources