A subresource-integrity issue with ng build and inlineCritical : true #27881
Description
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
No response
Description
In ng build, there is an option called subresource-integrity, it will add integrity="sha384-XXXX" attribute to the <link> tag.
In ng build, it will produce the following <link> tag to the <head> tag:
<link rel="stylesheet" href="styles.ef46db3751d8e999.css">When using ng build --subresource-integrity=true, it will produce:
<link rel="stylesheet" href="styles.ef46db3751d8e999.css" crossorigin="anonymous" integrity="sha384-OLBgp1GsljhM2TJ+sbHjaiH9txEUvgdDTAzHv2P24donTt6/529l+9Ua0vFImLlb">At this moment, it's all right.
Then, add some style to the src/styles.css file.
html { position: relative; }Then all the following settings to angular.json in the projects.demo1.architect.build.configurations.production section. The inlineCritical must be true.
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}Then, rebuild the project.
ng build --subresource-integrity=trueThe index.html in the output will contains the following styles in the <head> tag:
<style>html{position:relative}</style>
<link rel="stylesheet" href="styles.aba5cd1d749c3b19.css" crossorigin="anonymous" integrity="sha384-j1GsrLo96tLqzfCY+S+0wF8JCmo19babq8N3REzEhTlJi7mdFJ4requAsqDlSKCh" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.aba5cd1d749c3b19.css"></noscript>There are three parts:
- An inline style. That's OK.
- External style with a
integrityattribute. That's expected. It's OK. - The
<noscript>with a<link>was not expected. Also, the<link>is lack of aintegrityattribute. That's unexpected.
Minimal Reproduction
ng new demo1 --routing --style=css
cd demo1
echo "html { position: relative; }" >> src/styles.cssThen modify your angular.json file. Add the following settings to angular.json in the projects.demo1.architect.build.configurations.production section. The inlineCritical must be true.
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}Then build your project.
ng build --subresource-integrity=true -=configuration productionCheck the dist\demo1\index.html file.
Exception or Error
No error.
Your Environment
Angular CLI: 14.2.13
Node: 16.20.2
Package Manager: npm 8.19.4
OS: win32 x64
Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.13
@angular-devkit/build-angular 14.2.13
@angular-devkit/core 14.2.13
@angular-devkit/schematics 14.2.13
@angular/cli 14.2.13
@schematics/angular 14.2.13
rxjs 7.5.7
typescript 4.7.4
Anything else relevant?
No response