Upgrading Angular 11 to Angular 12 with auth0-angular SDK

Problem statement

These are some general steps on how to proceed when upgrading older versions of Angular to work with Auth0 Angular SDK. In this situation, the user used a very old Angular version and a very old version of @auth0/auth0-angular.

The Angular version is Angular 11, and the Auth0 Angular SDK is v2.0.1. Since Angular upgrades should be done one major version at a time, the problem comes when using the following combination:

@angular/common”: “^12.2.17”, “@angular/core”: “^12.2.17”, “@auth0/auth0-angular”: “^2.0.1”

Several errors are thrown. For example, in this particular case, the errors shown are as pasted below:

[ng] Can’t import the named export ‘ɵɵFactoryTarget’ from non EcmaScript module (only default export is available) [ng] ERROR in ./node_modules/@auth0/auth0-angular/fesm2015/auth0-auth0-angular.mjs 463:246-264

Troubleshooting

These are some general steps on how to proceed when upgrading older versions of Angular to work with Auth0 Angular SDK. In this situation, the user used a very old Angular version and a very old version of @auth0/auth0-angular.

The Angular version is Angular 11, and the Auth0 Angular SDK is v2.0.1. Since Angular upgrades should be done one major version at a time, the problem comes when using the following combination:

@angular/common”: “^12.2.17”, “@angular/core”: “^12.2.17”, “@auth0/auth0-angular”: “^2.0.1”

Several errors are thrown. For example, in this particular case, the errors shown are as pasted below:

[ng] Can’t import the named export ‘ɵɵFactoryTarget’ from non EcmaScript module (only default export is available) [ng] ERROR in ./node_modules/@auth0/auth0-angular/fesm2015/auth0-auth0-angular.mjs 463:246-264

Cause

  • Clear cause of the problem. One problem statement may have more than one cause. The user should be able to use symptoms and steps to reproduce to identify the cause. How-to knowledge solutions will not have a cause.

Solution

The Angular versions supported as per our documentation are not very specific regarding old versions.

Requirements

“[…] This project only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported.[…]”

So, given the information about the versions used above, it is necessary to dig through our GH repository history. In this particular case, the options are:

  • To use @auth0/auth0-angular v1.11.1 for Angular v12
  • To update @auth0/auth0-angular to v2.2.2 once Angular has been upgraded to v13.
    Note: Auth0 recommends always using the most recent versions of the different Languages and their respective SDKs. Using versions that are out of support can be subject to security vulnerabilities.

In this case, the working combination was Angular SDK v1.11.1 with Angular v12.