如何修复 angular 中的 ng build 项目

Question

How to fix the ng build project in angular without editing in angular.json

here's the error

Your global Angular CLI version (8.3.16) is greater than your local
version (8.1.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

chunk {0} runtime-es2015.52e4031f7f0d4c5547f5.js (runtime) 2.25 kB [entry] [rendered]
chunk {1} main-es2015.4e8665ff7ceef4e442ee.js (main) 4.62 MB [initial] [rendered]
chunk {2} polyfills-es2015.556027bb8b3cb9b5932e.js (polyfills) 173 kB [initial] [rendered]
chunk {3} styles.26e824d23ac01d2a1ba0.css (styles) 695 kB [initial] [rendered]
chunk {4} 4-es2015.823687dfc617d3f0d9c2.js () 3.43 kB  [rendered]
chunk {5} 5-es2015.f2106b47214935964e1d.js () 2.76 kB  [rendered]
Date: 2019-11-12T03:49:07.167Z - Hash: a28b3171138b993d899e - Time: 134373ms

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 3.47 MB.

ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 483 kB.

thanks in advance.

I got an error when it comes to 92% and the error is in the above.

Answer 1

Update: I see your edit question. For short answer you can only fix by using webpack-bundle-analyzer to analyze the bundle size and see which package affect your bundle size and remove it

You can see in angular.json there is the config for budget look like this

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

Remove this and you can build without error. But I would not recommend you to remove it because this config will let you know the size of your application and you can improve the performance of the app by remove unnecessary code to reduce the size.

You can have more information from here: https://angular.io/guide/build#configuring-size-budgets

Answer 2

I wouldn't suggest changing the budget sizes as they are meant just for this - warn you your bundles are growing too big.

You may consider 2 thing:

• Lazy loaded modules for parts of the application that are not visible in the initial screen. You may also combine this with some pre-loading strategy to avoid consequent delays in bundle fetching.
• If you've already done the above then most probably the problem is in some (maybe new) import that's adding a lot of code. Some new library you may be importing in multiple places. I've seen this when we started using an external component and imported it in 3 different places. The solution was to put the component in a lazy-loaded module and import in the modules that needed it.

Hope this helps.

Answer 3

You need to edit your angular.json file. because this angular project generated with default. so in you console appearing warning. find above line in your angular.json file to modify it.

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

Answer 4

angular.json

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "3mb", <=== increase this value 
      "maximumError": "5mb" <==== may also increase this
   }
]

Budgets here indicates limits for bundle sizes that should not be exceeded as its affects performance.