Upgrading to Angular 9: My experience

Angular with Ivy.

Last week, version 9 of Angular was released. The much anticipated Ivy Renderer was now set to default. The promise of smaller bundle sizes and faster applications was just too much for me to pass over. So Monday first thing, I wanted to get my upgrade going.

The following story shares my experiences in upgrading a sizable application with some complexity, giving a good indication of the types of issues you may be running into with your application.

Upgrading

As any upgrade starts, I created a new branch and ran the usual ng update to see what versions are eligible for automatic upgrades. I tried to run a ng update --all which failed cause of dependency issues like TSLint, Codelyzer and rxjs-tslint-rules not being updated yet. Normally, you could go for a ng update --all --force and see if that sticks, but considering the complexity of our application, I prefer to do it a bit more manually.

ng update @angular/cli @angular/core

This works fine, updates the CLI first and then updates and runs all migrations for the Angular application. This may result in some compilation errors, as not all situations and edge cases can be taken care of in the automatic migrations. Especially in larger applications, you’ll run into some edge cases.

An interesting error I ran into had nothing to do with the complexity of our application

ERROR in node_modules/@types/node/index.d.ts:200:11 - error TS2300: Duplicate identifier 'IteratorResult'.
    
    200 interface IteratorResult<T> { }
                  ~~~~~~~~~~~~~~
    
      node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6
        41 type IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;
                ~~~~~~~~~~~~~~
        'IteratorResult' was also declared here.

I’m still not entirely certain what exactly caused this compilation error after running the upgrade, it may be related to the Angular CLI as it depends on a newer version of Node. Fixing this issue turned out to be as easy as npm install --save-dev @types/node or updating your @types/node reference in your package.json.

Now that that’s sorted, and now we can move on to actually application-related…