Watch mode of @angular-devkit/build-angular:browser is broken

[da-mkay]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: v11.x

Description

When running an @angular-devkit/build-angular:browser target with --watch=true, the builder eventually fails with the message:
An unhandled exception occurred: Could not find asset for file: main.cc7ab080d48901fb3cbd.js.
Running the command again then works until a file is changed. Then it crashes again.

🔬 Minimal Reproduction

$ ng new ng-crash
$ cd ng-crash/
$ ng build ng-crash --watch=true

The last command crashes.
Running it again works.
Now change a file, like app.component.html, it will crash again.

🔥 Exception or Error

[error] Error: Could not find asset for file: main.cc7ab080d48901fb3cbd.js
    at /Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:138:27
    at Array.map ()
    at InitialCalculator.calculateChunkSize (/Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:135:18)
    at /Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:195:42
    at Array.map ()
    at /Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:195:22
    at Array.map ()
    at InitialCalculator.calculate (/Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:190:65)
    at calculateSizes (/Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:110:23)
    at Object.checkBudgets (/Users/mkay/tmp/ng-crash/node_modules/@angular-devkit/build-angular/src/utils/bundle-calculator.js:292:23)

🌍 Your Environment

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

I have the same result on two different MacOS machines.

[alan-agius4]

Note: it’s unlikely that you want to run watch on production builds because of the slower rebuild times due to the extra optimizations.

To run watch mode on development builds you can run.

ng build --watch --configuration development

[simeyla]

Note: it’s unlikely that you want to run watch on production builds because of the slower rebuild times due to the extra optimizations.

In general of course not. However, I'm testing loading times for my SSR enabled pages with this command, which gave the same error:

ng run ANGULAR12:build-ssr:production

I use Argo tunnel to open the page on a real mobile device and/or lighthouse in the browser.

@alan-agius4 Just wanted to mention this in case it's not covered by the above fix, but I'm guessing it probably would be.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}