After upgrading from Angular 12 to 13, cache is too large for Github

Question

I recently upgraded all of my dependencies in package.json to the latest. I went from Angular 12.2.0 to 13.0.1 and github is now rejecting my push with the following file size error. Is there some setting I need to define in angular.json build profile that will help minimize these cache file sizes?

remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 54.01 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack is 56.42 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: error: Trace: 0b9557fffbe30aac33f6d9858ef97559341c5c1614ace35524fcba85ac99ca76
remote: error: See http://git.io/iEPt8g for more information.
remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 122.06 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/5.pack is 123.92 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File .angular/cache/angular-webpack/f48e9bc724ec0d5ae9a9d2fed858970d0a503f10/0.pack is 154.05 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File .angular/cache/angular-webpack/9327900b3187f0b6351b4801d208e7b58f1af17e/0.pack is 165.50 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.56 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.55 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.

Edit:

1. I created this repo with Angular cli and have been maintaining and updating through many versions of Angular and had no issue until this latest update.

2. The .gitignore file is in the root of the application and matches the suggested example:

3. When adding /.angular/cache to the gitignore file, I run git rm -rf --cached . && git add . && git commit -m 'fix(gitignore): add angular cache' && git push --set-upstream origin chore/bump-deps but still get the file size error.

Answer 1

Make sure your .gitignore is in the parent folder of .angular.
In that .gitignore file, a simple .angular/cache/ should be enough to ignore that subfolder content.

Check it with:

git check-ignore -v -- .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack

You can see an example in ganatan/angular-starter/.gitignore (from an Angular 13 Example Starter project), where /.angular/cache/ is used, to anchor the rule to the top folder of the repository.

The OP S. Taylor confirms in the comments:

I'm pretty sure that was my issue.
I abandoned the dev branch and updated my dependencies without using the compound commands like git add . && git commit -m 'fix(gitignore): add angular cache'.
Making sure to note what was staged.

Answer 2

For me, the problem still persisted,

I reconfigured the git in the following way:

1. copy the configuration (.git/config)
2. delete the .git folder

rm -rf .git

3. initialize the git

git init 

4. paste the old configuration (p.1) in the new git config file (.git/config)

5. in .gitignore add line (for more details : angular-starter/.gitignore ):

node_modules
.angular/cache

6. Add files and commit

git add . && git commit -m 'update'

7. for avoiding to overwrite the previous commit, push in new branch

git push -f origin HEAD:<new_branch_name>

8. push by overwriting (forcing causes loss of old commits),

git push -f origin HEAD:main

9. or

git push -f origin HEAD:master

10. in general

git push -f origin HEAD:<branch_name>