Upgrade Angular to Version 9

Upgrading Angular from one version to another is usually not an easy task. You will very likely encounter new problems that have never occurred before. A new major version is full of features along with the deprecations of some previous methods. Usually we, at least I am, are unaware of the new features before they are released, so before jumping at upgrading it’s a good idea to get familiar with the features in the new version. In this post I'm going to list all the issues that we encountered while upgrading our application from ng8 to ng9.

The Angular team has put a lot of effort into improving the automatic ng update, but we choose to go for the manual method instead.

Why Upgrade to Angular 9

Angular comes with the Ivy renderer by default which provides increased performance and smaller bundles but also many new features.

Update: Angular 9.1 is out in the meantime!

Libraries are now compatible with the Ivy compiler via thengcc tool. The new version improves the speed of ngcc, and allows it to compile multiple packages concurrently.

These changes will help make builds faster and improve productivity for teams with monorep workspaces.

Packages

Our application is based on the micro app architecture built on custom core npm packages that we use in every app. Therefore the first step in upgrading is upgrading these common packages.

The most important find regarding packages is that packages are not yet allowed to be compiled with the new ivy compiler therefore in your tsconfig you have to disable ivy for packages. (Ivy is on by default). The compiler (ng-packagr) will warn you right away:

******************************************************************************
It is not recommended to publish Ivy libraries to NPM repositories.
Read more here: https://v9.angular.io/guide/ivy#maintaining-library-compatibility
******************************************************************************

Disabling ivy can be done by adding the following to your angularCompilerOptions in tsconfig.lib.json

"angularCompilerOptions": {
  "enableIvy": false
}

Update: I just found out that there is a workaround to deploying ivy built packages. I also encountered a sophisticated issue with namespace exports.

Angular Material

We are using Angular Material design, therefore we had to upgrade angular material to version 9 as well. From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

Lazy Loading

Syntax of lazy loading declaration has changed in the router configuration, therefore all loadchildren has to be changed in the following way:

old:
{
  path: 'welcome',
  loadChildren: './welcome/welcome.module#WelcomeModule'
}
new:
{
  path: 'welcome',
  loadChildren: () => import('./welcome/welcome.module').then(m => m.WelcomeModule)
}

WARNING environments/environment.prod.ts is part of the TypeScript compilation but it’s unused

The app tsconfig (tsconfig.app.json) had to be changed to add the following includes and files to overcome warnings raised for not used files.

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["node"]
    },
    "files": [
        "main.ts",
        "polyfills.ts"
    ],
    "include": [
        "./**/*.d.ts"
    ]
}

ModuleWithProviders got generic

All ModuleWithProviders types need to be converted to a generic representation, otherwise, you will get a compiler error like this in AOT:

error NG6005: YourModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in the library code you don’t control, please contact the library authors.

static forRoot(): ModuleWithProviders<MyModule> {
    return {
        ngModule: MyModule,
        providers: [
            ...CORE_PROVIDERS
        ]
    };
}

registerLocaleData deprecated

Since the deprecated locale data registration was removed, existing tests that rely on locale data will fail if these changes do not properly inject the new form of the locale data.

Tip: should you get mysterious runtime or injection errors, it’s allways a good idea to delete your node_modules and do a clean install afterwards.