We have various applications still using Angular 9 (plans to migrate to a more current angular version are in the backlog but we don't currently have the resources to migrate them). Our company has a central Jenkins instance, which used to run with NodeJS 14.

Our projects built flawlessly using this setup.

Yesterday they upgraded our Jenkins to use NodeJS 16 and since then some of our Angular builds fail during the ng test stage.

The error message is the following:

11:49:19  12 01 2022 11:49:19.978:ERROR [karma-server]: UnhandledRejection: TypeError: Cannot read properties of undefined (reading 'range')
11:49:19      at handleRangeHeaders (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/util.js:131:21)
11:49:19      at processRequest (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/middleware.js:98:19)
11:49:19      at ready (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/util.js:53:12)
11:49:19      at handleRequest (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/util.js:182:5)
11:49:19      at /var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/middleware.js:64:7
11:49:19      at new Promise (<anonymous>)
11:49:19      at middleware (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/webpack-dev-middleware/lib/middleware.js:63:12)
11:49:19      at /var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/karma.js:270:13
11:49:19      at call (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:239:7)
11:49:19      at next (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:183:5)
11:49:19      at /var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/karma/lib/web-server.js:32:9
11:49:19      at call (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:239:7)
11:49:19      at next (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:183:5)
11:49:19      at createProxy (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/karma/lib/middleware/proxy.js:94:14)
11:49:19      at call (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:239:7)
11:49:19      at next (/var/data/jenkins/workspace/T_ZIS_zis-zoll_feature_adfs-1530/zis-zoll-frontend/node_modules/connect/index.js:183:5)

Using "nvm" locally to switch between Node 12.22.3 and 16.13.3 I can toggle between a succesful build (using 12.22.3) and the same error as on Jenkins (using 16.13.3). When I run ng test I get the exact same error quoted above.

By running each spec.ts file on its own in IntelliJ, I have been able to narrow it down to a single test file.

I have searched and found various sources and it seems that our version of the Angular CLI in combination with Karma and NodeJS 16 is not compatible with each other.

I have found the following article on SO which has an answer stating the Node 15+ does not work with Karma, but it also has a part stating that adding proxies and files entries to the karma.conf.js file helped. I have tried that but it did not solve my issue.

I have also found this post on github which seems to indicate that the problem is the combination of the Angular 9 CLI with NodeJS 16.

Downgrading our Jenkins back to NodeJS 14 is out of our project's control. Upgrading Angular from 9 to a later version is planned but will not be finished before the end of Q1 2022.

Is there any workaround to get our setup working until then?

---

Update

We've been able to track down the cause for the problem, even if we don't understand why it causes the issue.

The tests fail for components which use the PrimeNG <p-multiSelect> component.

Commenting out the multi select in the HTML makes the Cannot read properties of undefined (reading 'range') error disappear (but of course the parts of the test working with the multi select then fail).

As the multi select is required for the functionality of our component (so permanently removing it is not an option), we decided the pragmatic solution is to just disable the (very few) test cases using that component until we get around to migrating to the latest Angular version.