Production build fail after Angular upgrade document.documentElement.setAttribute is not a function – Angular

The Problem:

After upgrading to Angular 16, the production build fails with the error ‘document.documentElement.setAttribute is not a function.’ This error occurs despite the absence of ‘documentElement.setAttribute’ references in the application code.

The Solutions:

Solution 1: Delete node_modules and package-lock.json

The error "document.documentElement.setAttribute is not a function" can occur after upgrading Angular due to outdated dependencies in the node_modules folder. To resolve this issue, delete the node_modules folder and the package-lock.json file. Then, run npm install to reinstall all dependencies. This will ensure that you have the latest versions of all required modules, eliminating the error.

Solution 2: Disabling Optimization

Disable optimization in the Angular configuration file (angular.json) by setting the "optimization" flag to false. This will prevent the build process from removing unnecessary code, which may be causing the error.

Modified angular.json Configuration:

    "optimization": false

Video Explanation:

The following video, titled "Related Video", provides additional insights and in-depth exploration related to the topics discussed in this post.

JS Casts 12 - How to fix