How to speed up the Angular build process

After making some changes in my TypeScript files, each build takes over 20 minutes. I run this command: ng build --output-path=..\..\static\angularjs.

If I run it in Microsoft PowerShell, it needs 25 - 30 seconds. This is a lot of time.

Enviroment

• Windows 10
• 8 GB-Ram
• PyCharm 64
• MS PowerShell

How can I speed this up?

My app took 28secs to build, but I've reduced the time to 9secs. Usings this flag

ng build --source-map=false

you can see the difference in time comparing the time:

ng build --stats-json 

ng build --stats-json --source-map=false

source map is intended only for debugging, Hope it helps

This reduced my build time to 50%

          "optimization": false,
          "outputHashing": "none",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "showCircularDependencies": false,
          "aot": true,
          "extractLicenses": false,
          "statsJson": false,
          "progress": false,
          "vendorChunk": true,
          "buildOptimizer": false,

I've found that for me, this issue was solved by using the watch flag, i.e.

ng build --watch=true

This runs constantly, and automatically builds files only when saved. It has dropped my build time from 8 sec to <1 sec for small changes in code, since it only generates .js files for what actually changed.

From https://angular.io/guide/deployment

> The ng build command generates output files just once and does not > serve them.

> The ng build --watch command will regenerate output files > when source files change. This --watch flag is useful if you're > building during development and are automatically re-deploying changes > to another server.

You should probably use ng build with the necessary options when you are building for production so that the necessary optimizations are completed.

According to https://github.com/angular/angular-cli/issues/6795 using --build-optimizer=false speeds up the build.

Based on others' answers I created my own configuration, which reduced dev build time three times.

1. In the angular.json I created a new profile called "development" under projects.<my-project-name>.architect.build.configurations:

   "development": {
     "optimization": false,
     "outputHashing": "none",
     "sourceMap": true,
     "namedChunks": false,
     "aot": true,
     "extractLicenses": false,
     "statsJson": false,
     "progress": true,
     "vendorChunk": true,
     "buildOptimizer": false
   },
   "production": {
     ...
   

   Here I enable source maps. If you don't need them, you can set sourceMap flag to false, it will reduce build time even more.

2. In the package.json file I added a new script called watch:

   "scripts": {
     ...
     "watch": "ng build --watch --configuration development"
   }
   

3. Then I just have to run in the command line:

   npm run watch
   

   and see the build taking much less than before and also on each change it rebuilds everything even quicker.

My final stats are the following:

• Default settings: 77 sec
• With source maps: 25 sec
• Without source maps: 21 sec

If this answer helps you, please leave a comment on what specific advice was helpful!

I recently upgraded from Angular 8 to Angular 13. My build time was comparable (~10 minutes in both Angular 8 and Angular 13), but I struggled with my rebuild time (i.e. I use --watch while I develop; if I change only a few files, Angular 8 was recompiling in <10 seconds; Angular 13 required another 10 minutes!).

I used angular.json (see below for a screenshot) to specify "aot":false and I saw much better rebuild times (back to ~8-10 seconds) -- this option is the same as angular-cli ng build command's --aot=false.

I'm adding my answer because currently no other answer suggests trying to use "aot:false. In fact, many of the most popular answers explicitly suggest trying "aot":true! Those answers aren't wrong (in fact, they identify options that improve performance, like "sourceMap":false.) But for me, "aot":false was the gamechanger.

Also, I recognize the benefits of "AOT" (Ahead-of-Time compilation), for example "faster rendering in the browser". I still use "AOT" ("aot":true) for my production builds; but my answer here is focused on development, where I use --watch to re-build on file changes, so I want a fast re-build, and I don't mind "slower rendering in the browser".

Some helpful resources (I will add more if I find more):

• This comment suggests AOT compilation might be slower than JIT compilation, which may be the reason "aot":false works for me
• This comment might help you profile your build process (to find the bottleneck/troubleshoot long build times) using node --inspect and chrome://inspect
• This comment has more tips on profiling with NG_BUILD_PROFILING=1

Other tips that may improve build performance:

• This blog post describes the NG_PERSISTENT_BUILD_CACHE=1 option For Angular <=12 (I think this option was made the default in Angular 13, RFC here
  • In Angular 13 the NG_PERSISTENT_BUILD_CACHE may be related/replaced by the angular.json "cache" property, as described here in Angular 13 release blogpost, and this documentation; the default value of "cache": { "enabled": ... is true!
• Another Git Issue that talks about using a custom builder like @angular-builders/custom-webpack:browser, and "aot":false

Some related stuff (more experimental / may not be helpful) :

• Blogposts like this one suggest you could use your own builder, like esbuild, to see build performance improvements -- but this is more experimental and may not support "native ways" of doing things in Angular (i.e. the templateUrl property). Also they could come at a cost (i.e. larger bundle sizes)
• This video from Google Chrome Developers talks about principles for "startup performance" , however it's >1 year old, and focuses bundle size and other best practices; so the video may make suggestions that decrease build performance (for other tradeoffs like smaller bundles or easier debugging).

EDIT I set "aot":false` in my angular.json as shown in the below screenshot. Notice the location/path in the JSON is:

root>projects>{craft-app}>architect>build>configurations>{development}

... where {craft-app} is the specific name of the angular project you need to build and {development} is the specific name for the configuration you want to use and specify in the -c argument, as in:

ng build craft-app -c=development

You can use node parameter --max_old_space_size like

node --max_old_space_size=4096 ./node_modules/.bin/ngbuild --prod --build-optimizer

But I prefer to set it up via environment:

NODE_OPTIONS=--max-old-space-size=4096

It speedup our build process on CI pipeline twice.

Adding an answer which might be relevant only to the more recent Angular versions (10 and later)

I discovered that the mixing CommonJS and AMD dependencies is the culprit in my case.

The angular build process issues these kinds of warnings to indicate that you are in this situation:

Warning: xxxxxx.ts depends on 'yyyyyy.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

My own rebuild time was unbearable at almost 6 minutes in this state - note that this is a rebuild - meaning it's just for saving one modified typescript file:

Build at: 2021-05-28T07:39:58.559Z - Hash: 5f8c96f22c3daf60faa2 - Time: 234429ms

But when I removed the offensive references, initial build time went down to about 80 seconds, and rebuild times went down to 7-8 seconds.

Admittedly, you might not always be able to remove references to offensive modules, but in my case I was able to do that for local debugging, and to keep them when deploying. This sped up my development considerably.

While in dev mode you can change this flag for your development to

"buildOptimizer": false

This worked for me . Angular 7 .

Remove all optimizations for prod build

The time decreases from one hour to 6 min in my project