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.