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.
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.
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
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:
ionic cordova build ios
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.
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 @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org @email@example.com @firstname.lastname@example.org
Let’s see if our build will work — spoiler: it’s not going to…
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.
Awesome. Let’s try it out and see if it will build.
Oh yeah. I forgot to update the Typescript version. Whoops.
npm install email@example.com. Okay, now we’re good to build again 😃.
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:
That’s it. Seriously, Ivy is now enabled in the app. How awesome is that? 😄
Lets’ try building…
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 @firstname.lastname@example.org
Let’s try that build again.
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.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!
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.
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.
Additionally, here is the app repository, which shows each part of the process as an individual branch, incase you’re interested.
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.