Ionic 4 & Angular Ivy — The Future Is Now, Old Man!

Today’s article is aimed at seeing how we can start using Angular Ivy in an Ionic 4 app.

Photo by Rodion Kutsaev on Unsplash

I have been getting more serious with my writing as of late, and with Angular Ivy’s current opt-in beta status, I figured it would be the perfect topic to talk about. I’ll be showcasing the build size differences along our journey from Angular 7, to Angular 8 with Ivy enabled in an Ionic 4 app.

Disclaimers

Please note: this is just an experiment, and is not intended to be used in production ready apps. I am also only testing the build sizes for IOS, as my Android test phone has gone belly up on me.

I wanted to make sure that my results were accurate, so I ran through this process twice, but got slight variations in the app-bundle sizes. I think this is due to the iPhone size reporting, as the apps were identical, except for the bundle ID’s. The baseline app size varied by ±300 kilobytes between tests.

Let’s Get Started

To kick things off, I need to have a fresh Ionic 4 app. I am using 5.0.3 of the ionic-cli, which is the latest version when I started this article.

ionic start ionic-ivy-test tabs

Okay. I have my base project, without any additives. Let’s add the ios platform to it, and then we can see what the baseline app size is.

ionic cordova platform add ios

After waiting for the above command to finish, i’m almost ready to get out baseline app-size. I need to go into the config.xml file, and change the app-bundle id, otherwise Xcode is going to yell at me for it not being unique. 🤷‍♂

The two build commands that I’m going to be using are:

Dev — ionic cordova build ios
Prod — ionic cordova build ios --prod

After running each command, i’ll do a build clean (CMD+Shift+K) in Xcode, to ensure that any cached files are cleaned. Let’s see the initial results.

Results

Dev: 24.1 MB
Prod: 27.3 MB

So a 13% increase in app size, when we used the prod command. My best guess would be the difference between dev using JIT (just in time) and prod using AOT (ahead of time). But I could be mistaken.

Incoming Angular 8

I kicked off the upgrade by running npm outdated to find out which of my packages needed to be updated. Turns out it was a lot…

So I went ahead and updated all of the @angular packages to their latest version listed in that above link.

npm install @angular-devkit/architect@0.800.3 @angular-devkit/build-angular@0.800.3 @angular-devkit/core@8.0.3 @angular-devkit/schematics@8.0.3 @angular/cli@8.0.3 @angular/compiler@8.0.2 @angular/compiler-cli@8.0.2 @angular/core@8.0.2 @angular/forms@8.0.2 @angular/language-service@8.0.2 @angular/platform-browser@8.0.2 @angular/platform-browser-dynamic@8.0.2 @angular/router@8.0.2 @angular/common@8.0.2

Let’s see if our build will work — spoiler: it’s not going to…

Shout out to PaulStelzer on Github for the following solution.

Okay, thanks to PaulStelzer on Github, there is a solution to fixing this. npm i paulstelzer-ionic-angular-toolkit. Once that finishes, I need to update my angular.json to use the new toolkit. I only need to replace the sections shown below, with the following values.

"ionic-cordova-build": {
  "builder": "paulstelzer-ionic-angular-toolkit:cordova-build",
  ...
},
"ionic-cordova-serve": {
  "builder": "paulstelzer-ionic-angular-toolkit:cordova-serve",
  ...
}
...
"cli": {
  "defaultCollection": "paulstelzer-ionic-angular-toolkit"
},

Awesome. Let’s try it out and see if it will build.

Oh yeah. I forgot to update the Typescript version. Whoops. npm install typescript@3.4.5. Okay, now we’re good to build again 😃.

Results

Dev: 25.1 MB
Prod: 8.5 MB (WOW!)

So using the Dev command, we see about a 4% increase in build size, just from adding Angular 8 to our project. When using the Prod command, we see an immediate 68.9% decrease in build size. If that isn’t magic, I don’t know what is.

Upgrading from Community College to Ivy League

Note: From here on out, we’re going to run into MAJOR compatibility issues with Ionic 4 & Angular 8, with Ivy enabled. Stop reading if you are intending on doing this in as production app.

Now we’re in uncharted waters, friends. Time to get real weird with it. In the tsconfig.json I need to change the following settings:

{
 ...
 "compilerOptions": {...}
 ...
"angularCompilerOptions”: {
 "enableIvy": true,
 "allowEmptyCodegenFiles": true
 }
}

That’s it. Seriously, Ivy is now enabled in the app. How awesome is that? 😄
Lets’ try building…

Angular changed the game.

Turns out, Angular 8 changed the way changeDetection works, so now we’re in some trouble. After a bit of research, it turns out the most likely culprit is Stencil, which Ionic uses to generate the framework components. After checking out the Stencil repo, it looks like this has been corrected in the 1.0 release of Stencil, but just hasn’t hit the streets in the Ionic repo just yet.

Thankfully for us, npm tells us that there is a dev-build of ionic-angular 4.6.0, which has the updated Stencil package.

npm install @ionic/angular@4.6.0-dev.201906192117.6727cfc

Let’s try that build again.

Trimmed for brevity…

Okay. So Ivy’s backwards compatibility isn’t exactly 100% complete yet, and there’s an issue with the npm packages for Ionic plugins. After spending an hour or two trying to figure out why cordova was not being exported from @ionic-native/core, so I relented and ended up uninstalling the packages for the default ionic-plugins, but leaving the plugins themselves installed.

npm uninstall @ionic-native/status-bar @ionic-native/splash-screen

Gotta make sure to remove them from the app.module.ts & app.component.ts as well.

This will slightly affect the build comparisons, but I checked out the bundlePhobia for both:
@ionic-native/status-bar — 2kB
@ionic-native/splash-screen — 1.1kB
Since it’s only 3.1kB, i’m not worried about how it’ll affect the accuracy of the build comparisons. Maybe in version 3, i’ll do this ahead of time in the baseline app to be more accurate.

Run the build, and see if it works. Hint: IT DOES!

Results

Dev: 22.2 MB
Prod: 7.5 MB

Well that’s exciting!!! 🎉🎊🎉

In Dev there was an increase in app size when adding Angular 8, but by enabling Ivy, I decreased the build size by 7.8%, when compared to the baseline.

In Prod, there was a 72.5% decrease in app sizes with Ivy enabled, which is absolutely bananas for the future of app development.

Final Thoughts

Although Angular 8 Ivy is still not fully compatible, I can’t find any really compelling reason not to upgrade to Angular 8, to see the immediate benefits from the latest version. Clearly I haven’t tested it thoroughly, but I haven’t seen any side affects from the upgrade so far.

Side by side comparisons, version 2 is the one used in this article.

Additionally, here is the app repository, which shows each part of the process as an individual branch, incase you’re interested.

Questions?

You can find me on:
- GitHub: https://github.com/bengejd/
- Medium: https://medium.com/@JordanBenge
- Twitter: https://twitter.com/J_Benge13

Who am I? My name is Jordan Benge, I am a Software Developer who loves helping others and contributing to Open-Source. I’ve been working in the Ionic Framework since Ionic 1, and have tried to keep up to date on the latest and greatest when it comes to Hybrid Mobile App Development.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below if you need any help.