Angular cache dir (.angular) grows and grows

[jcompagner]

When building our product with Angular 13 the .angular/cache is now generated.
At a first build thats around 500MB but it will not take long and it is grown to 9GB is that normal?

What is exactly cached there and how is it reused?

[alan-agius4]

Hi @jcompagner,

There are several parts of the pipeline that are cached on disk, the main benefit of this is that future compilations become warm as the build state is restored from disk instead of having to start the build from a cold state. This helps to decrease the build time by up to 65% as a number of computations are not performed.

There are a number of things that are cached, including but not limited to:

• Babel transformations
• Results of the minified CSS and JS
• Build dependencies and resolutions
• Modules transformation result

The cache is expected to continue to grow, unless it is periodically purged by the users. The more code changes are performed in a repo, the larger the cache will become. You can read the cache documentation on how to the clear the cache.

In future, we are hoping to perform automatic cleanups of stalled cache data.

It would be interesting to know which files/directories are consuming the most disk usage. Can you please provide some metrics?

[jcompagner]

currently after a clean with a first build:

.angular\cache\angular-webpack\452f48df2f16eff7f35d217be73a1e17c8ec5851

the 0.pack file is taking almost all the space 447MB (the whole cache dir id 472MB)

after i have installed 2 updates of packages and run a build the total size si already grown to 516MB
and now the 0.pack file shrink to 207MB but i have a 1.pack now also that is 266MB and a 2.pack file that is 9MB

---

-a--- 9-12-2021 17:22 217749179 0.pack
-a--- 9-12-2021 17:22 279087529 1.pack
-a--- 9-12-2021 17:22 9778010 2.pack
-a--- 9-12-2021 17:22 7874557 index.pack
-a--- 9-12-2021 12:50 7649466 index.pack.old

then i run one build again:

-a--- 9-12-2021 17:22 217749179 0.pack
-a--- 9-12-2021 17:28 278296822 1.pack
-a--- 9-12-2021 17:22 9778010 2.pack
-a--- 9-12-2021 17:28 4769610 3.pack
-a--- 9-12-2021 17:28 7874590 index.pack
-a--- 9-12-2021 17:22 7874557 index.pack.old

running one other build again:

---

-a--- 9-12-2021 17:22 217749179 0.pack
-a--- 9-12-2021 17:28 278296822 1.pack
-a--- 9-12-2021 17:22 9778010 2.pack
-a--- 9-12-2021 17:29 149 3.pack
-a--- 9-12-2021 17:29 4769605 4.pack
-a--- 9-12-2021 17:29 7874619 index.pack
-a--- 9-12-2021 17:28 7874590 index.pack.old

(these builds are not production builds but kind of debug builds without watch)

so every build it generates a bit more and maybe it adjust the last file it added...

[alan-agius4]

Webpack have actually a PR in flight to delete old pack files webpack/webpack#14661.

[jcompagner]

by the way would it be possible to not include the fully path in those pack files?
that would i think greatly reduce the size for me. my full path is:

D:\servoy_inst\202112\developer\ws.metadata.plugins\com.servoy.eclipse.ngclient.ui\target\

if i count that now over the latest pack files described above its about 140K hits...
thats maybe around 13MB ?

[alan-agius4]

The pack file are generated by Webpack and we don't have control over their contents.

[jcompagner]

today i got a new uuid folder:

dir .\.angular\cache\angular-webpack\ -r

    Directory: D:\servoy_inst\202112\developer\ws\.metadata\.plugins\com.servoy.eclipse.ngclient.ui\target\.angular\cache\angular-webpack

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          10-12-2021    12:02                00c6f86ad9c4b0ac77d5832867ecc1e127725cb3
d----           9-12-2021    17:29                452f48df2f16eff7f35d217be73a1e17c8ec5851

    Directory: D:\servoy_inst\202112\developer\ws\.metadata\.plugins\com.servoy.eclipse.ngclient.ui\target\.angular\cache\angular-webpack\0
0c6f86ad9c4b0ac77d5832867ecc1e127725cb3

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---          10-12-2021    12:02      183781752 0.pack
-a---          10-12-2021    12:02      291742569 1.pack
-a---          10-12-2021    12:02       11290539 2.pack
-a---          10-12-2021    12:02        8089879 index.pack
-a---          10-12-2021    12:01        6896611 index.pack.old

    Directory: D:\servoy_inst\202112\developer\ws\.metadata\.plugins\com.servoy.eclipse.ngclient.ui\target\.angular\cache\angular-webpack\4
52f48df2f16eff7f35d217be73a1e17c8ec5851

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---           9-12-2021    17:22      217749179 0.pack
-a---           9-12-2021    17:28      278296822 1.pack
-a---           9-12-2021    17:22        9778010 2.pack
-a---           9-12-2021    17:29            149 3.pack
-a---           9-12-2021    17:29        4769605 4.pack
-a---           9-12-2021    17:29        7874619 index.pack
-a---           9-12-2021    17:28        7874590 index.pack.old

and before of that it almost doubled it again (now its around 1GB in total)
and yes some installs did happen. (besides some builds)

What i don't fully understand is that a build makes it constantly grow
Why is the first build not generating stuff but the second build (of no packages are changed) is not just reused the cache (where it is made for i guess in the first place)

And i guess if a new package install is done (or what ever makes kind of the cache invalid) it would be nice to then first auto clean the cache..

[alan-agius4]

The new UUID is expected.

The cache key changed because of a new release, which results in the old cache to stale. I think in this case we should do an automatic clean for known stale directories. This is something that we can potentially do.

Regarding the additional pack file when no files have been changed. This shouldn't happen, I was able to replicate it but so far I haven't narrowed down whats the problem and if a bug in the Angular CLI or Webpack.

[alan-agius4]

I have debugging this a bit and there are 2 root causes of extra pack files when files have not changed.

1. Using webpack's ProgressPlugin with MiniCssExtractPlugin causes the first pack to be invalidated. (Using ProgressPlugin with MiniCssExtractPlugin causes FS cache pack to be invalidated webpack/webpack#14946)
2. When the cache is restored we are causing unneeded module rebuilds for files that have not been changed.

   angular-cli/packages/ngtools/webpack/src/ivy/plugin.ts

   Line 401 in 4bf3cd7

   new Promise<void>((resolve) => compilation.rebuildModule(webpackModule, () => resolve()));