ng build発生時のエラー(Inlining of fonts failed) プロキシ設定の参照方法について

発生している事象/質問について

ng build実行時に、プロキシーエラーによりフォント最適化に失敗してしまいます。

angular.jsonでフォント最適化を無効化する方法については確認出来ましたが、有効化したままプロキシ設定を参照させる方法については分かりませんでした。
解決策がありましたら、ご教授願えますと幸いです。

状況の詳細

  • Anular CLIのアップデート後(8→11)に、ng buildで以下のエラーが発生するようになった
> ng build --prod
√ Browser application bundle generation complete.
√ ES5 bundle generation complete.
√ Copying assets complete.
× Index html generation failed.
Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap over the internet.
connect ETIMEDOUT 
  • 調査したこと
    • Angular 11からインラインフォントへの新機能が追加されている
    • 現在の開発環境ではプロキシを通過できずエラーが発生してしまう
      • 正しくHTTP_PROXY/http_proxyの環境変数を設定していても無視されてしまう
      • 旧バージョンのAngular8では発生しなかった事象
    • フォント最適化の無効化
      • 無効化によるbuildは実行できた

環境情報

  • Angular CLI
> ng --version

Angular CLI: 11.1.1
Node: 10.16.3
OS: win32 x64

Angular: 11.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3
  • package.json
{
  "name": "XXXXXX",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.0",
    "@angular/cdk": "~11.1.0",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/forms": "~11.1.0",
    "@angular/material": "^11.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "aws-sdk-mock": "^5.1.0",
    "jquery": "^3.5.1",
    "ng-material-treetable": "^0.5.5",
    "rxjs": "~6.6.3",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.1",
    "@angular/cli": "^11.1.1",
    "@angular/compiler-cli": "~11.1.0",
    "@angular/language-service": "~11.1.0",
    "@types/jasmine": "~3.6.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.14.22",
    "aws-sdk": "^2.831.0",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~6.0.0",
    "karma": "~6.0.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~9.1.1",
    "tslint": "~6.1.0",
    "typescript": "~4.1.3"
  }
}

  • npm -v
> npm -v
6.9.0
1 Likes

こちらのIssueと同じように見えました

Angular CLIのv11.2以降では修正されたようではあります