angular-cli: Error encountered when updating @angular-devkit/build-angular to Version 16.1.0

Command

build

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.0.0

Description

Upon updating @angular-devkit/build-angular to Version 16.1.0, an error occurs during index HTML generation. The specific error message is “document.documentElement.setAttribute is not a function.”

Upon investigation, I have identified the root cause of the issue. It appears that enabling the optimization option, specifically setting inlineCritical to True under styles, triggers the error. However, if this option is disabled, the build process completes successfully.

Minimal Reproduction

Command used: npx nx run project:build:production

Package use: @angular-devkit/build-angular 16.1.0

Exception or Error

√ Browser application bundle generation complete.
√ Copying assets complete.
× Index html generation failed.
document.documentElement.setAttribute is not a function
 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  NX   Ran target build for project *projectname* (58s)
 
    ×    1/1 failed
    √    0/1 succeeded [0 read from cache]

Your Environment

Angular CLI: 16.1.0
Node: 18.10.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.1.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.0
@angular-devkit/build-angular   16.1.0
@angular-devkit/core            16.1.0
@angular-devkit/schematics      16.1.0
@angular/cli                    16.1.0
@schematics/angular             16.1.0
rxjs                            7.8.1
typescript                      5.1.3

Anything else relevant?

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 14
Comments: 27

Commits related to this issue

fix(@angular-devkit/build-angular): error during critical CSS inlining for external stylesheets These changes revert the performance improvement from https://github.com/angular/angular-cli/pull/24925... — committed to crisbeto/angular-cli by crisbeto a year ago
fix(@angular-devkit/build-angular): error during critical CSS inlining for external stylesheets These changes revert the performance improvement from https://github.com/angular/angular-cli/pull/24925... — committed to angular/angular-cli by crisbeto a year ago
fix(@angular-devkit/build-angular): error during critical CSS inlining for external stylesheets These changes revert the performance improvement from https://github.com/angular/angular-cli/pull/24925... — committed to angular/angular-cli by crisbeto a year ago

Most upvoted comments

It may be caused because of NPM vs YARN. I use NPM.

Use reactions to show what you use:

👀 - NPM
🚀 - YARN

Deleting the node_modules folder & package-lock.json and reinstalling did solve the issue too. I do really thing it might be an NPM issue when updating. I did update from 16.0.x => 16.1.x

Akxe on Jun 27, 2023

Same problem here.

It seems to be gone when inlineCritical: false in angular.json.

 "optimization": {
    "styles": {
      "inlineCritical": false
    }
  }

Full path: projects.app.architect.build.configurations.development.optimization.styles.inlineCritical

niekhoogmanedap on Jul 2, 2023

I was facing the same issue and deleting the node_modules folder & package-lock.json and reinstalling the dependencies fixed this issue for me

mazlano27 on Jun 25, 2023

I had the same problems, and changing the angular.json did not help in my case.

As mentionned earlier by several people, I manually installed domhandler with npm and everything went back to normal, with no modifications needed inside the angular.json.

Moustingle on Jul 20, 2023

Same problem here.

It seems to be gone when inlineCritical: false in angular.json.
 "optimization": {
    "styles": {
      "inlineCritical": false
    }
  }
Full path: projects.app.architect.build.configurations.development.optimization.styles.inlineCritical

This worked for me. Thanks.

blueiceprj on Jul 13, 2023

Same issue here - the cause was also that domhandler 4.x was an additional dependency to domhandler 5.x. In my case this dependency was caused by @capacitor/* which I was using in version 4.x. Upgrading to 5.x fixed the problem

JanST123 on Jun 29, 2023

I can canfirm what @PascalSwissDev says. index.html is valid and if I reduce the index.html to only what it really needs the same error occurs. If i set inlinecritital to false or move back to 16.0.* everything is working again. But I have other projects with Angular 16.1 who are working without problems. So it seems to be a third-party-package that impacts the issue.

paulstelzer on Jun 23, 2023