Error encountered when updating @angular-devkit/build-angular to Version 16.1.0 #25419

PascalSwissDev · 2023-06-22T06:27:34Z

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

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2023-06-23T08:19:10Z

I suspect that this is caused because the index.html does not have HTML tags.

Can you confirm that your index.html is a valid HTML document?

PascalSwissDev · 2023-06-23T10:49:24Z

I can indeed verify that the index.html is valid. The only modification required is downgrading the version number to 16.0.0, after which it will function properly with the unchanged index.html.

paulstelzer · 2023-06-23T10:52:54Z

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.

alan-agius4 · 2023-06-23T13:29:45Z

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

paulstelzer · 2023-06-23T14:42:35Z

Could find it out. 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.

vlio20 · 2023-06-23T14:54:09Z

@paulstelzer, is it a direct dependancy?

paulstelzer · 2023-06-23T15:03:51Z

"domhandler" was installed by a third party package, now I am installed it directly in my "devDependencies"

vlio20 · 2023-06-23T15:09:26Z

Can you tell what dependancy?

klerick · 2023-06-23T16:13:02Z

@vlio20 https://www.npmjs.com/package/critters

vlio20 · 2023-06-23T16:30:15Z

So is it something that should be updated by the angular team?

alan-agius4 · 2023-06-23T16:33:52Z

critters already has a direct dependency on domhandler version 5.

https://unpkg.com/browse/critters@0.0.19/package.json

Akxe · 2023-06-23T16:38:08Z

In my case, I do have a build with "CommonJS or AMD dependencies". Maybe that is the source?

vlio20 · 2023-06-23T18:20:39Z

In my case , I have validated that I am on a version of critters that is dependant on domhandler ^5.0.2

Akxe · 2023-06-23T18:27:15Z

I would also like to point out that it does happen with webpack and esbuild but only in prod build.

And I do not use critters at all.

vlio20 · 2023-06-23T18:30:57Z

@Akxe I can confirm this as well happens with webpack and esbuild

mazlano27 · 2023-06-25T14:46:14Z

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

PascalSwissDev · 2023-06-27T09:56:45Z

For me removing the package-lock.json also resolved the issue.

Akxe · 2023-06-27T10:28:10Z

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

JanST123 · 2023-06-29T05:53:05Z

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

niekhoogmanedap · 2023-07-02T12:30:28Z

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

blueiceprj · 2023-07-13T23:00:20Z

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.

Moustingle · 2023-07-20T11:04:00Z

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.

marksulls · 2023-07-21T12:54:22Z

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

This worked for me. Thank you.

alan-agius4 · 2023-07-26T07:21:09Z

Repo from #25575:

https://github.com/majoer/angular-csp-link-bug

…g for external stylesheets These changes revert the performance improvement from angular@e88aea6 and add a test. The problem with the previous approach is that it assumes that a `link` tag processed by Critters will be preceded by a `style` tag that was inserted by Critters. This assumption might not necessarily be true if Critters is unable to resolve the content of the linked styles. Furthermore, I'm not sure if we need to optimize this code path to begin with, because it only does a shallow traversal of the `head` tag which is generally fast and is unlikely to have many direct descendants. Fixes angular#25419.

…g for external stylesheets These changes revert the performance improvement from e88aea6 and add a test. The problem with the previous approach is that it assumes that a `link` tag processed by Critters will be preceded by a `style` tag that was inserted by Critters. This assumption might not necessarily be true if Critters is unable to resolve the content of the linked styles. Furthermore, I'm not sure if we need to optimize this code path to begin with, because it only does a shallow traversal of the `head` tag which is generally fast and is unlikely to have many direct descendants. Fixes #25419. (cherry picked from commit d6ae2c7)

…g for external stylesheets These changes revert the performance improvement from e88aea6 and add a test. The problem with the previous approach is that it assumes that a `link` tag processed by Critters will be preceded by a `style` tag that was inserted by Critters. This assumption might not necessarily be true if Critters is unable to resolve the content of the linked styles. Furthermore, I'm not sure if we need to optimize this code path to begin with, because it only does a shallow traversal of the `head` tag which is generally fast and is unlikely to have many direct descendants. Fixes #25419.

angular-automatic-lock-bot · 2023-08-26T00:08:18Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

This comment was marked as spam.

Sign in to view

alan-agius4 added needs: investigation Requires some digging to determine if action is needed area: @angular-devkit/build-angular labels Jun 22, 2023

alan-agius4 self-assigned this Jun 22, 2023

alan-agius4 mentioned this issue Jun 23, 2023

build fail when inlineCritical is enabled #25429

Closed

1 task

alan-agius4 added needs: repro steps We cannot reproduce the issue with the information given and removed needs: investigation Requires some digging to determine if action is needed needs: repro steps We cannot reproduce the issue with the information given labels Jun 23, 2023

alan-agius4 added the needs: more info Reporter must clarify the issue label Jun 23, 2023

alan-agius4 added needs: repro steps We cannot reproduce the issue with the information given and removed needs: more info Reporter must clarify the issue labels Jun 23, 2023

leosvelperez mentioned this issue Jun 30, 2023

Server Side Rendering Error nrwl/nx#17704

Closed

4 tasks

alan-agius4 mentioned this issue Jul 26, 2023

Bug: "link.prev?.setAttribute is not a function" - CSP and <link rel="stylesheet"> #25575

Closed

1 task

alan-agius4 added needs: investigation Requires some digging to determine if action is needed and removed needs: repro steps We cannot reproduce the issue with the information given labels Jul 26, 2023

crisbeto mentioned this issue Jul 26, 2023

fix(@angular-devkit/build-angular): error during critical CSS inlining for external stylesheets #25584

Merged

clydin closed this as completed in #25584 Jul 26, 2023

majoer mentioned this issue Aug 16, 2023

"TypeError: link.prev?.setAttribute is not a function" upon rendering any page with "ngCspNonce" set. angular/universal#3241

Closed

3 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error encountered when updating @angular-devkit/build-angular to Version 16.1.0 #25419

Error encountered when updating @angular-devkit/build-angular to Version 16.1.0 #25419

PascalSwissDev commented Jun 22, 2023 •

edited

Loading

This comment was marked as spam.

This comment was marked as spam.

alan-agius4 commented Jun 23, 2023

PascalSwissDev commented Jun 23, 2023 •

edited

Loading

paulstelzer commented Jun 23, 2023

alan-agius4 commented Jun 23, 2023

paulstelzer commented Jun 23, 2023

vlio20 commented Jun 23, 2023

paulstelzer commented Jun 23, 2023

vlio20 commented Jun 23, 2023

klerick commented Jun 23, 2023

vlio20 commented Jun 23, 2023 •

edited

Loading

alan-agius4 commented Jun 23, 2023

Akxe commented Jun 23, 2023

vlio20 commented Jun 23, 2023

Akxe commented Jun 23, 2023

vlio20 commented Jun 23, 2023

mazlano27 commented Jun 25, 2023

PascalSwissDev commented Jun 27, 2023

Akxe commented Jun 27, 2023 •

edited

Loading

JanST123 commented Jun 29, 2023

niekhoogmanedap commented Jul 2, 2023 •

edited

Loading

blueiceprj commented Jul 13, 2023

Moustingle commented Jul 20, 2023

marksulls commented Jul 21, 2023

alan-agius4 commented Jul 26, 2023

angular-automatic-lock-bot bot commented Aug 26, 2023

Error encountered when updating @angular-devkit/build-angular to Version 16.1.0 #25419

Error encountered when updating @angular-devkit/build-angular to Version 16.1.0 #25419

Comments

PascalSwissDev commented Jun 22, 2023 • edited Loading

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

This comment was marked as spam.

This comment was marked as spam.

alan-agius4 commented Jun 23, 2023

PascalSwissDev commented Jun 23, 2023 • edited Loading

paulstelzer commented Jun 23, 2023

alan-agius4 commented Jun 23, 2023

paulstelzer commented Jun 23, 2023

vlio20 commented Jun 23, 2023

paulstelzer commented Jun 23, 2023

vlio20 commented Jun 23, 2023

klerick commented Jun 23, 2023

vlio20 commented Jun 23, 2023 • edited Loading

alan-agius4 commented Jun 23, 2023

Akxe commented Jun 23, 2023

vlio20 commented Jun 23, 2023

Akxe commented Jun 23, 2023

vlio20 commented Jun 23, 2023

mazlano27 commented Jun 25, 2023

PascalSwissDev commented Jun 27, 2023

Akxe commented Jun 27, 2023 • edited Loading

JanST123 commented Jun 29, 2023

niekhoogmanedap commented Jul 2, 2023 • edited Loading

blueiceprj commented Jul 13, 2023

Moustingle commented Jul 20, 2023

marksulls commented Jul 21, 2023

alan-agius4 commented Jul 26, 2023

angular-automatic-lock-bot bot commented Aug 26, 2023

PascalSwissDev commented Jun 22, 2023 •

edited

Loading

PascalSwissDev commented Jun 23, 2023 •

edited

Loading

vlio20 commented Jun 23, 2023 •

edited

Loading

Akxe commented Jun 27, 2023 •

edited

Loading

niekhoogmanedap commented Jul 2, 2023 •

edited

Loading