Ionic ramblings with version 4 and version 3…

Posted on Updated on

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.mobileprovision file not being attached to your app bundle. This breaks push notifications – it will cause Mismatched User errors.

 

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 ionic@3.20.0
sudo npm i cordova-ios@3.6.3

sudo npm i cordova-ios@4.5.5

sudo npm i @ionic-native/core@3.14.0 –save
sudo npm i @ionic-native/android-permissions@3.14.0 –save
sudo npm i @ionic-native/file-transfer@4.1.0 –save
sudo npm i cordova-plugin-whitelist –save
sudo npm i @ionic/app-scripts –save
sudo npm i -g typescript@2.7.2 –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:

deploy_ios.sh

 

 

# BUILDING FOR IOS
ionic cordova platform remove ios
ionic cordova platform add ios
#ionic cordova platform update ios@3.9.2
#ionic cordova platform update ios@3.20.0
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:

deploy_android.sh
ionic cordova platform rm android
#ionic cordova platform add android
#cordova platform add android --save
ionic cordova platform add android@6.4.0
#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 (cordova-lib@8.1.0)

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s