Upgrade to Angular 10

4 min readSep 15, 2020

In this article, I will summarize the issues I encountered while upgrading to ng 10.1. Our project is a large project with micro apps and several common npm packages, so I might have, bumped into more pitfalls than the regular user.

The means to upgrade

There are several ways to upgrade your angular app or package. The first and easiest to use way is using the built-in upgrade via the ng update command.

Using ng update

Using the CLI to upgrade will find the dependencies for you automatically:

λ ng update
Your global Angular CLI version (10.1.0) is greater than your local
version (9.1.0). The local Angular CLI version is used.To disable this warning use "ng config -g cli.warnings.versionMismatch false".
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
    We analyzed your package.json, there are some packages to update:Name                                    Version                  Command to update
     -------------------------------------------------------------------------------------
      @angular/cdk                            9.2.4 -> 10.2.0          ng update @angular/cdk
      @angular/cli                            9.1.0 -> 10.1.0          ng update @angular/cli
      @angular/core                           9.1.0 -> 10.1.0          ng update @angular/core
      rxjs                                    6.5.4 -> 6.6.3           ng update rxjs

Note : It’s recommended to update one major version at a time. Let’s suppose you are currently using ng8 and want to upgrade to ng10. In that case, first you have to upgrade from ng8 to ng9 and then ng9 to gn10, not from ng8 to ng10 directly.

Manual upgrade

I prefer upgrading my apps manually. To do that first I upgrade my global CLI to the latest version:

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

Then I create a dummy app with ng new to get an actual list of the latest angular dependencies in the generated package.json.

After that, I update the package.json of my app with the latest angular dependencies. Next, I check my other dependencies for updates and compatibility.

And now on to the issues I encountered.

Angular decorators

Decorators missing in Angular component classes throw compilation errors:

ERROR: myDir/my-class.ts:9:23 — error NG2007: Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

// declaratins like this used to work
export abstract class MyClass extends Something implements OnInit {
}//from now you have to decorate it with an empty @component
@Component({template: ''})
export abstract class MyClass extends Something implements OnInit {
}

Typescript version

In our project, we depend on a package that fails to compile (at the time of writing) with typescript version 4.0.2. Luckily it does compile with 3.9.6. Angular CLI ng new command generates projects using ts 4.0.2, but luckily according to the documentation the minimum required typescript version to use with ng 10 is 3.9.x, which in fact, does work perfectly.

CommonJS dependencies

From version 10 angular warns on dependencies using CommonJS. The reason for this is because the angular optimizer and packager best works with ECMAScript modules. (CommonJS packages can reduce the efficiency of optimization and impact bundle sizes) So you either remove those dependencies or whitelist them in angular.json in the following way:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     ...
   }
   ...
},

Avoid using CommonJS dependencies, use the above whitelisting only in case you have no alternative.

ModuleWithProviders got generic

Yes that has already gone generic in ng 9, but now this check is also done for packages, so all package modules had to be adapted accordingly. Check my ng9 article for details.

Component inheritance

A nice find is that from this angular version the component inheritance for base classes sitting in libraries work without extra tweaking. Previously the angular component lifecycle methods were not overridden properly in subclasses.

fileReplacements

fileReplacements is configuration setting in angular.json that you can use to replace files before compilation. Most frequently this is used to customize your environment depending on your different configurations:

"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            },
            {
                "replace": "src/.htaccess",
                "with": "src/.htaccess.std"
            }
        ],

From ng10 fileReplacements are working for files that are part of a bundle only. Thus replacing .htaccess in my case no longer happened. An alternate solution may be configuring assets per configuration.

Keycloak problems

We use Keycloak authentication, after upgrading the app went into an endlessly refreshing loop after authentication. The reason for this was using wrong dependencies.

The documentation of the keycloak-angular package says that for Angular 10.x.x apps you have to use keycloak-angular 8.x.x with a keycloak-js version which matches your Keycloak server version. It turns out that using the combo of keycloak-angular 8.x.x with keycloak-js 9.x.x produces the endless loop. Using version 10.x.x for keycloak-js solved the problem.