CODEWITHSUNDEEP
javascriptangulartypescriptangular16
ani.lava
ani.lava

Reputation: 369

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

I have upgraded my application to Angular 16 and upgrade went well and application is working as expected

But when I run the command for prod build

ng build --configuration=production

I got this error

Index html generation failed.
document.documentElement.setAttribute is not a function

I am not sure how to fix this as I don't have documentElement.setAttribute in my code

Setting optimization and buildOptimizer to false in angular.json does work but I know this is not right way to fix

any help or suggestion would be appreciated

Upvotes: 24

Views: 5402

Answers (6)

Raphaël Balet
Raphaël Balet

Reputation: 8573

Note

As this is an "old" question, it seems this error may happen again.

I had this issue while using Angular v19.0.7.

I tried the "Remove package-lock.json" solution but didn't worked.
Reason: I've locked the version in my package.json file (And you should too), making the "delete lock file" magic not working anymore

Solution

  • Mine: I've updated to v19.1.4 and it worked back again (Which is the @latest as the time of writing).
  • Yours: Control if you've just change the version, if this is the case, fall back to the former and wait for a new release.

Temporary workaround

If both solution aren't working, follow Andrès's Answer.

Note: Don't forget to revert this change once the latest angular version doesn't has the bug anymore

Upvotes: 1

Priyanshu
Priyanshu

Reputation: 81

Just run npm install domhandler

Version 5 fixed for me

Upvotes: 1

William Lahti
William Lahti

Reputation: 1226

Here is the issue on Angular's issue tracker: https://github.com/angular/angular-cli/issues/25419.

For those who do not wish to set optimization.inlineCritical = false, you might be interested in this comment: https://github.com/angular/angular-cli/issues/25419#issuecomment-1604383624

In my project where it is not working the npm package "domhandler" is installed with version 4.* and NOT 5.0

if I install "domhandler" with version 5 everything is working again. So a third party package installs an older version of domhandler while critters expects and needs version 5.

To see if your project has this issue, use npm ls domhandler. In my case, I was using node-html-markdown to convert HTML to markdown in a paste handler, and that package depended on domhandler@4.

Once you locate the packages loading the older domhandler dependency, see if you can upgrade them. If you can't, then it might be best to disable the inlineCritical option of the optimizer configuration as others have said until you can update or replace the dependency.

Upvotes: 1

André
André

Reputation: 2016

I will post this as an answer and save it, because it fixed the problem.

In angular.json change the optimization configuration to:
"optimization": {"styles": {"inlineCritical": false }}

Upvotes: 2

user23132765
user23132765

Reputation: 9

I got this the same error while am upgrading angular 15 to 16 and resolved by changing angular.json as "optimization" : false.

Thanks to @Matthieu Riegler for their hint in a comment.

Upvotes: 0

miscellian
miscellian

Reputation: 167

Try remove node_modules and package-lock.json then run npm install

Upvotes: 15

Related Questions