Migrating Angular 7 Apps to Angular 8 (with Ivy)

Today, finally, Angular 8.0.0 has been release. 🎉
For those are didn’t know what’s coming up in version 8, you can look at this article and this video.

This is a major release spanning the entire platform, including the framework, Angular Material, and the CLI with synchronized major versions. [source]

It’s been a long time since my last article on Medium, I was a little bit busy lately. This time, I want to share my experience on migrating Angular 7 Apps to Angular 8 (with Ivy), at least as far as I try today.

So, I tried to migrate one of my projects, not a complex project, just a simple Management Information System with PWA support, but the component quite a lot. The project contain 126 @Component and 25 @NgModule (total 946KB exclude assets), and this is for the dependency.

"@angular/animations": "~7.2.15",
"@angular/cdk": "~7.3.7",
"@angular/common": "~7.2.15",
"@angular/compiler": "~7.2.15",
"@angular/core": "~7.2.15",
"@angular/flex-layout": "~7.0.0-beta.24",
"@angular/forms": "~7.2.15",
"@angular/http": "~7.2.15",
"@angular/material": "~7.3.7",
"@angular/platform-browser": "~7.2.15",
"@angular/platform-browser-dynamic": "~7.2.15",
"@angular/pwa": "~0.13.9",
"@angular/router": "~7.2.15",
"@angular/service-worker": "~7.2.15",
"core-js": "^2.5.4",
"file-saver": "~2.0.2",
"ngx-cookie-service": "~2.1.0",
"ngx-device-detector": "~1.3.5",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"

Before migrate, I used Angular CLI 7.3.9, and Node v12.3.1. For other details, see picture below.

The build size for js file is around 4.1MB.

The Migration Process

For the initial approach you can follow update.angular.io for the migration guide. Because not all steps are needed for my case, so the steps I take include

1. Update Angular CLI
2. Run ng update @angular/cli @angular/core
3. Update some other package version in package.json
4. Update Route Configurations using Dynamic Imports
5. Try to run and build.

So, these are dependencies and detailed versions after updating.

"@angular/animations": "~8.0.0",
"@angular/cdk": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/flex-layout": "~8.0.0-beta.26",
"@angular/forms": "~8.0.0",
"@angular/http": "~8.0.0-beta.10",
"@angular/material": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/pwa": "~0.800.0",
"@angular/router": "~8.0.0",
"@angular/service-worker": "~8.0.0",
"core-js": "^2.5.4",
"file-saver": "~2.0.2",
"ngx-cookie-service": "~2.1.0",
"ngx-device-detector": "~1.3.5",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"

Until this section there is no outstanding problem, except the build process throw FATAL ERROR JavaScript heap out of memory. (if Ivy enabled, this error doesn’t show up). After doing some research for a while, I have to add additional flag --max_old_space_size. You can adjust the size of the memory, mine is 5GB.

node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod

This is the size when compared to version 7. Because version 8 using Differential Loading by Default, then the build process produces two types of file, es5 and es2015.

The size is not much different, but when I do an audit performance (in Chromium Browser), this is the result.

Version 7.2.15

Version 8.0.0

The Performance increased by 16%.

For other section (Accessibility, Best Practices, SEO) it’s just about compression, http2, and caching (because I only use simple HTTP server from python). The PWA section 5/6 because I test in local and not using https.

I don’t quite believe the migration process is so easy, because it’s still Javascript ecosystem after all. 😅

Trying Ivy for The First Time

You can see this guide for enabling Ivy, and just build as usual.

And… my guess was right, this is not that easy, some problems appeared in build process.

1. Some errors on Flexlayout.
2. Some libraries causing error Error: There is no format with import statements in 'path/to/node_modules/pacakge' entry-point in my case ngx-cookie-service and ngx-device-detector.
3. The bundle size is the same even though ivy is enabled, and sometimes only js file is created, html, assets, etc is not. (There must be something wrong in configuration or project structure).

So, my solutions…

1. Because I do not use a lot of FlexLayout, then I removed it and just do some more css.
2. Some packages have been updated (and maybe work with Ivy), so you can try to use the latest version. In my case, updating ngx-cookie-service to 2.2.0 is working, but not with ngx-device-detector. If updating to latest version doesn’t work, you can try this solution, But I decided not to do it, because it might be another bigger problem. Because ngx-device-detector is not too important in my case, at this time I decided to detect it from user-agent manually.
3. This problem is hard, I have tried checking again and again, maybe there is something I missed, but it didn’t work. So I decided to use my dirty secret weapon to deal with Angular. I create a new project and gradually move all of the sources.

after all, the build process runs without errors, and this is the result.

The size is ~50% smaller. 🎉
For the audit process, the results are the same.

So, Angular 8.0.0 and Ivy is very worth trying. Actually there are a number of other new features, like the Bazel build, but the most interesting feature for me is Ivy.

Are you looking for any information about remote work?
or have a cool resource about remote work?
remotework.FYI is all you need to know about remote work, find and share cool resources right now.