Inlining fonts behind HTTP proxy

[Eddman]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

Since 11.0.0 there is the new feature to inline fonts. The problem is that it does not work behind HTTP proxy. We have correctly set HTTP_PROXY/http_proxy and NO_PROXY/no_proxy environment variables, but it is ignored.

🔬 Minimal Reproduction

There is no support for proxy:

angular-cli/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts

Line 107 in 871dd6a

https.get(

There is not really a reproduction scenario. It fails only when running behind HTTP proxy.

🔥 Exception or Error

✖ Index html generation failed.
Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/icon?family=Material+Icons over the internet.
connect ETIMEDOUT 172.217.16.202:443

🌍 Your Environment

Angular CLI: 11.0.1
Node: 14.15.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1100.1 (cli-only)
@angular-devkit/core         11.0.1 (cli-only)
@angular-devkit/schematics   11.0.1 (cli-only)
@schematics/angular          11.0.1 (cli-only)
@schematics/update           0.1100.1 (cli-only)

Anything else relevant?

[michaelfaith]

This is affecting me as well. Our build servers don't have access outside our firewalls. I guess turning it off, is our only option.

[alan-agius4]

On how to disable this, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration

[nico151999]

Had the same issue behind a corporate proxy. Thought of using an index.html referencing the google fonts in dev config and replacing the index.html with a prod version referencing a local copy of the fonts that would be made in the build procedure of my docker image in my pipeline. However, this would have required additional scripting for the woff2 files referenced in the css files. I ended up using fontsource. This way ng build does not need to reach fonts.googleapis.com.

[michaelfaith]

Had the same issue behind a corporate proxy. Thought of using an index.html referencing the google fonts in dev config and replacing the index.html with a prod version referencing a local copy of the fonts that would be made in the build procedure of my docker image in my pipeline. However, this would have required additional scripting for the woff2 files referenced in the css files. I ended up using fontsource. This way ng build does not need to reach fonts.googleapis.com.

Why not just disable font optimization?

[austi10]

If I set ONLY fonts optimization to false

"optimization": {
    "fonts": false
}  

are scripts and styles property set to false or are they still true by default ?

I am not able to find any info on this. Could someone help ?

[alan-agius4]

@austi10,

They are true, by default. See https://angular.io/guide/workspace-config#optimization-configuration

[michaelfaith]

Yeah, if you think about the code behind that property, the type is likely a simple boolean or some optimization config interface. Defining it as a simple boolean true is the equivalent of setting it with an object that has all properties as true. So if you want to just turn off one, provide an object that has all true, but the one(s) you want turned off as false. Seems pretty straightforward.