-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular CLI 16+ generates config that fails to inline stylesheet from typekit/Adobe #27637
Comments
@CITguy, I am unable to replicate this problem. Can you please share a reproduction? |
It seems our corporate VPN is at fault, somehow. I tested on another machine that's not behind our corporate VPN and it's working fine. Unfortunately, due to the lack of information in the error output, I still don't know how to figure out exactly why things are breaking. Any ideas how I might be able to get better debugging data from the failure? |
You can attempt to implement the modification provided in this link locally: https://github.com/angular/angular-cli/pull/27641/files. This should help reveal more information. |
Seems the cause is |
I wonder if the plugin should fail gracefully in the event that optimization can't succeed. In my mind, the inlining optimization should be a "best effort", so that even if the plugin can't successfully inline styles from a CSS If the webpack optimization is attempting to do the same as the esbuild plugin (inlining the file), it seems to be leave the import as-is (though without a warning message), instead of raising a critical error (i.e., it fails gracefully). |
In webpack, global stylesheets don't support font inlining; it only occurs in the index file. This case warrants more than just a warning. If the build runs in a CI environments warnings can be overlooked. Additionally, in CI/CD pipelines,a warning can result in deploying an unoptimized version of the app, negatively impacting Core Web Vitals (CWV). |
Thus usually means that the SSL certificate authority (CA) that issued the certificate is not recognized by your system. |
Yeah, the root of the problem is Node is unaware of the Zscaler cert, which causes the request to the typekit url to fail. This issue can be closed now that #27641 will provide additional info next time I encounter an error. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Command
build, new
Is this a regression?
The previous version in which this bug was not present was
v15
Description
I'm unable to get an Adobe/typekit CSS stylesheet to embed using an esbuild-based builder configuration.
The only way to get it to work with esbuild is to disable font optimization via
projects.PROJECT_NAME.architect.build.configurations.production.optimization.fonts = false
inangular.json
. Otherwise, I have to revert back to thebrowser
builder.For now, I'm using the stable
browser
Webpack builder, so that I don't have to muck around with updating configs that may need to be reverted later when we eventually switch to esbuild. However, the esbuild scripts provide no useful console output or advanced logging to explain WHY it fails, so I have no way to troubleshoot the exact issue.Please advise.
Minimal Reproduction
Given that the build script doesn't provide enough detailed information, I can't reliably determine if the issue resides in the build script itself or if it is a result of being behind our corporate firewall/vpn.
That being said, here's how I was able to reproduce the issue.
application
build scriptnpm install
application
orbrowser-esbuild
)src/styles.scss
npm run build
FYI: This seems to only be an issue with builders using esbuild. The webpack-based
browser
script still works fine, but doesn't actually inline the CSS file; it just passes through the CSS@import
, verbatim.Exception or Error
Your Environment
Anything else relevant?
I've seen old support questions that mention that a VPN may potentially cause problems, but I've not had the chance to verify on a machine without a VPN running.
The text was updated successfully, but these errors were encountered: