Angular 11 buid error: 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.

  • Angular 11で有効化されたフォント最適化機能について
  • プロキシ環境下で開発をしている場合、ng buildでプロキシエラーが発生してしまう

発生した事象

  • Anular11 へのアップデート後に、ng buildで以下のエラーが発生する
    1
    2
    3
    4
    5
    6
    7
    > 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からインラインフォントへの新機能が追加されている
  • プロキシ環境下で開発を行っている場合は、build時にプロキシを通過できずエラーが発生してしまう
    • 正しくHTTP_PROXY/http_proxyの環境変数を設定していても無視されてしまう

回避策

  • 幾つかGitのissueに同様の事象が挙がっていたが、以下が結論であった

    1
    ビルドサーバーはファイアウォールの外にはアクセスできません。それをオフにするのが唯一の選択肢だと思います。
  • font optimizationをオフにする方法

要約

  • 設定ファイル(angular-pj/angular.json)でbuildの設定を変更することで解決可能

  • デフォルトの設定

    • “optimization”: trueとなっている
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      "projects": {
      "app_name": {
      ...
      "architect": {
      "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
      ...
      },
      "configurations": {
      "production": {
      "fileReplacements": [
      {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
      }
      ],
      "optimization": true,
  • angular.jsonの各項目について

    • “architect”
      • コンパイルやテスト実行などの複雑なタスクを実行するためにCLIが使用するツール
      • ターゲットの設定に従って、指定されたタスクを実行するために指定されたビルダーを実行するシェル
    • “build”
    • “configurration”
      • このセクションでは、異なる目的地のための代替構成を定義し、名前を付ける。このセクションには、それぞれの設定のためのセクションがあり、その環境でのデフォルトのオプションを設定する。
    • “optimization”
      • より細かい設定を行うために、ブール値かオブジェクトのいずれかを指定できる。このオプションを使用すると、ビルド出力のさまざまな最適化が可能になる
      • fonts
        1
        2
        フォントの最適化を有効にします。
        注意: これにはインターネットへのアクセスが必要です
      • fonts optimsization options
        • inline
          1
          2
          アプリケーションの HTML インデックス ファイル内の外部の Google フォントとアイコンの CSS 定義をインライン化することで、レンダリング ブロック要求を減らします。
          注意:これにはインターネットへのアクセスが必要です。
  • 以下に変更

    1
    2
    3
    "optimization": { 
    "fonts": true
    }
  • 以上でbuildが問題なく実行できた

    1
    2
    3
    4
    5
    > ng build --prod
    √ Browser application bundle generation complete.
    √ ES5 bundle generation complete.
    √ Copying assets complete.
    √ Index html generation complete.

同様の事象はgitのissueで複数確認できたが、無効化する以外の解決策は見つけられなかった。

参考

関連記事

その他

[Angular] ng build時のエラー --aotについて

  • Angular 9以降でデフォルト化されたAOTについてのメモ
    • 8以前のバージョンからアップデートした際に注意すべきポイント

発生する事象

  • Angularのバージョンアップ後、build実行時にエラーが発生する
    • –aot オプションが必要になる
      1
      ng build --aot

原因/AOT

  • Angular9 以降ではahead-of-time (AOT)コンパイラがデフォルトに採用されている

  • Ahead-of-time (AOT) コンパイラ

    • 引用
      1
      2
      3
      Angular の ahead-of-time (AOT) コンパイラ は、ブラウザがそのコードをダウンロードして実行する前に、
      ビルドフェーズ中にAngular HTML コードと TypeScript コードを効率的な JavaScript コードに変換します。
      ビルドプロセス中にアプリケーションをコンパイルすると、ブラウザでのレンダリングが速くなります。
  • Angularには、アプリケーションをコンパイルする2つの方法がある

    • Just-in-Time (JIT)
      • 実行時にブラウザ内でアプリケーションをコンパイルします。This was the default until Angular 8.
    • Ahead-of-Time (AOT)
      • ビルド時にアプリとライブラリをコンパイルします。This is the default since Angular 9.
  • ng build (build only)またはng serve (build and serve locally)のCLIコマンドを実行すると、
    コンパイルの種類(JITかAOTか)は、angular.jsonで指定したビルド設定のaotプロパティの値に依存する

    • Angular 8以前で開始した場合はデフォルトでtrueではない

これらの要因により今回のエラーが発生したと思われる

aotの有効化

  • 設定を変更することで、buildの度にオプション(–aot)を付与せずともエラーを回避可能になる

  • 以下の設定ファイルでbuildの設定を変更することで解決できる

    • aotをtrueとするだけ
  • angular-pj/angular.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist/reacq-pj",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true, //こちらを変更

参考

関連記事

その他

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×