After many hours of using Ionic to create “the perfect app” that compiled and functioned as expected, I was nearly ready to launch.
However that all changed almost overnight.
I had started out using Ionic 3, as what the original install had put on my system. Everything worked fine. As I progressed and installed more and more NPM modules, it still seemed to function ok, even with the various dependencies.
Until, I decided to upgrade my laptop to Ionic version 4. I’d read about how simple it was to upgrade and so I thought, “why not”. Sadly, what followed was a series of problems, which made the app un-usable, to the point where it wouldn’t compile and builds were failing.
In this process, I had also updated to XCode 10. This proved to also be another problem in it self, because not all of the modules I’m using are compatible with it.
OneSignal for example, have a warning message on their site to say not to use XCode 10. Oops.
Xcode 10 Notice
Cordova is currently incompatible with Xcode 10’s new build system. For a workaround, please see this post
Because of changes to Xcode’s build process, this results in the
embedded.mobileprovisionfile not being attached to your app bundle. This breaks push notifications – it will cause
I’ve had strange error messages such as “Ionic 3: Build in “prod” mode: Cannot find module “.” Yep, a module called ‘.’… This was only discovered after building my code for xcode, and then observing a white empty background (and like here) in my newly built app for my iphone. What was the cause? I have no idea – still… but, I was getting some interesting errors (and others like it) from OneSignal in the XCode build notes: OneSignal has detected that your application delegate implements a deprecated method (application:didReceiveLocalNotification:). Please note that this method has been officially deprecated and the OneSignal SDK will no longer call it. You should use UNUserNotificationCenter instead…
Other errors such as this were also common:
no-unused-variable is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead. CordovaError: Promise rejected with non-error: 'ios-deploy was not found. Please download, build and install version 1.9.2 or greater from https://github.com/phonegap/ios-deploy into your path, or do \'npm install -g ios-deploy\'' at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) [ERROR] An error occurred while running cordova build ios (exit code 1).
So, after a lot of message, It was time to downgrade the app back to Ionic version 3.20.0. Josh Morony does an excellent job at saying how to upgrade your app, but, I’ve got to be honest, this is a really crazy thing the Ionic team have proposed to do. You basically have to recreate your entire project and copy and paste and make it work again. a whole days work (and probably some more) just to have the same functionality… I can’t see it being worth it just yet.
I have no plans on touching version 4 yet – for a long time, as doing so, will break the entire build environment. In upgrading this, I also experienced NPM dependency hell as they call it. It was not fun.
I’m going back to running c4i App. V3 for the time being.
You may need this command at some stage too:
npm cache clean --force
This list is compatible with each other:
Since the “upgrade”, and then “downgrade”, this list allows for the build to go ahead, but still isn’t enough to solve the white screen of death in my app on iOS under “prod”.
sudo npm install -g firstname.lastname@example.org
sudo npm i email@example.com
sudo npm i firstname.lastname@example.org
sudo npm i @email@example.com –save
sudo npm i @firstname.lastname@example.org –save
sudo npm i @email@example.com –save
sudo npm i cordova-plugin-whitelist –save
sudo npm i @ionic/app-scripts –save
sudo npm i -g firstname.lastname@example.org –save
sudo npm install -g ios-deploy –unsafe-perm=true
You may have to do this command at some stage too
sudo chmod -R 775 /Users/YOU/Your_App_Path/node_modules/
I have an iOS build script for production and XCODE testing:
# BUILDING FOR IOS ionic cordova platform remove ios ionic cordova platform add ios #ionic cordova platform update email@example.com #ionic cordova platform update firstname.lastname@example.org ionic cordova build ios --prod #ionic cordova build ios --prod --buildFlag="-UseModernBuildSystem=0" cd platforms cd ios #Open XCode for building and creating open "APP_NAME.xcworkspace" cd .. cd ..
My Android script is a little more complicated, but also works:
ionic cordova platform rm android #ionic cordova platform add android #cordova platform add android --save ionic cordova platform add email@example.com #https://forum.ionicframework.com/t/ionic-v1-android-ionic-cordova-platform-add-android/127543 ionic cordova build android --prod --release --debug #keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks platforms/android/build/outputs/apk/release/android-release-unsigned.apk my-alias cp ~/Library/Android/sdk/build-tools/27.0.3/zipalign platforms/android/build/outputs/apk/release/ cd platforms/android/build/outputs/apk/release/ rm app_name.apk ./zipalign -v 4 android-release-unsigned.apk app_name.apk #copy to dropbox # cp app_name.apk /Volumes/Creative2HD/DropBox/Dropbox/ cd .. cd .. cd .. cd .. cd .. cd .. cd ..
So, as you read this, I’m still content to battle through and make this work, it’s just the observations I’ve had. I’ll continue to use Ionic, but will be lightly treading. If there is a way to sandbox each install or ionic version, I’d be very happy to know how. Does Vagrant, or Droplet type thing allow for this kind of Ionic development? I have no idea… but to spin up a VM would be crazy. Surely there’s another way…
I’m currently redownloading XCode version 9 from the Apple Developer site in an effort to downgrade the program. Hopefully this will solved all problems and I’ll be back again to normal and it will build correctly.
If it ain’t broke, don’t fix it.
This is my current build environment. It’ll probably change though:
cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0 global packages: cordova (Cordova CLI) : 8.1.1 (firstname.lastname@example.org) local packages: @ionic/app-scripts : 3.2.0 Cordova Platforms : android 6.4.0 ios 4.5.5 Ionic Framework : ionic-angular 3.9.2 System: Node : v8.11.1 npm : 6.4.1 OS : macOS High Sierra Environment Variables: ANDROID_HOME : not set Misc: backend : pro
Now, it’s time to install Xcode 9 and see if she will compile and deploy.
So, now that I’ve spent half the day sorting this out, I’ve managed to get the app to compile – eventually, and remove the white screen of death.
Strangely enough, this was only happening on the –prod builds.
To actually diagnose this a little better, I added the browser platform and then tried to run it there. Well, the browser –prod –release platform actually shows more error messages, than Safari. This proved to be very helpful, as it it turned out that typescript or more specific @angular/cli was missing or had the wrong version.
Now, it’s time to get the Android platform to build successfully again for deployment.
Make sure you have the correct Android SDKs installed. I’m using version 27.0.3
brew install gradle
There is also a problem with brew and using gradle on High Sierra.
As per here outlines the solution: https://github.com/Homebrew/brew/issues/3285
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
After you have done this and it’s working for you, the first time it runs, it’ll download a lot of necessities. Wait, and it’ll eventually load/compile.
I guess that in doing this, you really only ever set up a dev environment once, and then from there, you move on. This is a crazy ride, but I’m getting there.
As a side note, always, always, always, have your source code in a source control repository of some sort. I like Git, and use it with SourceTree and their remote git platform. It’s free for closed source and small projects.
Everything now compiles and is deployable again.