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.
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.
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
babel-webpack. These folders would be inside the Angular version folder name — in this case, it’s
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.