Angular Budget - Maximum exceeded

Aktuell arbeite ich privat an einem Projekt basierend auf Angular. Beim Build für die Produktiv-Umgebung bin ich auf einen Fehler gestoßen. Ich lade mir eine Third-Party Bibliothek in das Projekt und dabei kam es zu folgendem Fehler. Wie man diesen umgeht und korrigiert möchte ich folgend erläutern.

WARNING in budgets, maximum exceeded for /home/node/app/angular-app/src/app/... Budget 6 kB was exceeded by 598 kB.

ERROR in Child compilation failed:
undefined
ERROR in budgets, maximum exceeded for /home/node/app/angular-app/src/app/... Budget 10 kB was exceeded by 594 kB.

Das Problem liegt darin, dass in der angular.json die Budgets, also maixmalen Dateigrößen für das Gesamtpakekt, sowie für einzelne Dateien festgelegt werden kann. In meinem Fall hat eine geladene CSS-Datei, welche größer als 10kB ist zu dem Problem geführt.

Das Ganze lässt sich durch dier Anpassung folgendes Snippets in der anuglar.json Datei beheben

"budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "1mb",
      "maximumError": "2mb"
    }
  ]

Dadurch werden die Limits für maximumWarning, sowie maximumError neu definiert und die Restriktionen für das Projekt neu gesetzt.

Die Werte sollten natürlich für den entsprechenden Use-Case angepasst werden. Dabei sollte nicht wahllos definiert werden, sondern genau in dem Umfang, wie es benötigt wird. Das Default-Limit wurde von Angular schließlich nicht willkürlich festgelegt, sondern zielt darauf ab, dass Eure Webseite schnell und einfach gerendert und dem Endnutzer angezeigt wird.