Angular Cache —What’s inside and how it improves Angular build timing on local and CI pipeline

If you have an Angular project from version 13 onward, you must have noticed the folder called .angular in your source code. This feature allows Angular CLI to cache the previous builds to reduce the build operations and improves the build time. In this story, we will dig deep into that.

.angular folder in the source files view

I won’t repeat the cache commands and configuration in this story. You can find out more from Angular official cache documentation, but here is some excerpt.

Cache environments

By default, disk cache is only enabled for local environments. The value of environment can be one of the following:

all - allows disk cache on all machines.

local - allows disk cache only on development machines.

ci - allows disk cache only on continuous integration (CI) systems.

You can configure the cache settings using Angular CLI.

ng config cli.cache.environment all

What’s in it?

Have you ever tried to explore the cache output?

Angular CLI creates two folders in .angular/cache folder, namely angular-webpack and babel-webpack. These folders would be inside the Angular version folder name — in this case, it’s 16.1.6 version.

The angular-webpack folder contains the binary files, which we can’t simply read in the editor. However, babel-webpack folder contains the text files in .json format. Let’s scrutinize them.

Dashboard component — Source files

I have created a standalone component called DashboardComponent with its own .html, .scss and .ts files. For sake of simplicity, I have deleted the .spec.ts file, but you can check how it gets cached. Here is the source code of these files.