Angular 12.0.1 builds multiple times on startup and on file changes

[paulaustin-automutatio]

🐞 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: ....

Yes 11

Description

Initial startup or changes to files result in multiple compilation and build tasks. Sometimes as many as 12. Resulting in the same number of refreshes in a browser. It doesn't matter if the browser is open or not.

🔬 Minimal Reproduction

The following shows the multiple compilation and build when starting the application and no changes to files were made.

I had upgraded the project from 11->12, deleted package lock/node modules and re-installed.

ng serve --poll 5000

⠋ Generating browser application bundles...Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Warning: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   6.86 MB
main.js               | main          |   1.49 MB
polyfills.js          | polyfills     | 473.22 kB
styles.css, styles.js | styles        | 437.20 kB
runtime.js            | runtime       |   6.88 kB

                      | Initial Total |   9.24 MB

Build at: 2021-05-21T13:02:59.643Z - Hash: 2de2b25237662869d3dd - Time: 23058ms

** Angular Live Development Server is listening on 0.0.0.0:42026, open your browser on http://localhost:42026/ **


√ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-05-21T13:03:05.708Z - Hash: a7428e1f9e318bd05731 - Time: 5233ms

√ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-05-21T13:03:10.175Z - Hash: a7428e1f9e318bd05731 - Time: 3904ms

√ Compiled successfully.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.1
Node: 14.15.5
Package Manager: npm 6.14.11
OS: win32 x64

Angular: 12.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[paulaustin-automutatio]

I just verified that this is also an issue with 12.0.0.

Interestingly I have an another app on a Mac that was upgraded from 11->12 and it doesn't have the same issue as this one in windows.

In relation to the #20882 I did have a svg in this app, but took it out and it still has the issue.

I'm using powershell to launch the app

[paulaustin-automutatio]

If I run it in WSL/Ubuntu then it doesn't do the repeated rebuild.

So my guess is it's something to do with windows file change detection

[inidaname]

@paulaustin-automutatio I run it on Ubuntu 21.04 and I got the same multiple build

[Ristaaf]

I had this problem and found out that it was because of an "error" in my angular.json file, does not have to be the same reason here but check to make sure that you do not have any "assets" in your angular.json that does not exist (I specifically had one of the glob pattern variety, not sure if it would do the same with normal assets)

[paulaustin-automutatio]

@Ristaaf I did have a missing css in the angular.json file, however removing that from both the browser and karma sections didn't fix the issue.

Do you know if there is or is plans to add a "lint" type function for the angular configuration files to check validity?

[alan-agius4]

@paulaustin-automutatio, does the issue manifest itself if you disable polling?

[paulaustin-automutatio]

@alan-agius4 Yes if I just run ng serve without the poll option it compiles twice.

⠋ Generating browser application bundles...Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Warning: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   7.00 MB
main.js               | main          |   1.47 MB
polyfills.js          | polyfills     | 473.01 kB
styles.css, styles.js | styles        | 436.41 kB
runtime.js            | runtime       |   6.58 kB

                      | Initial Total |   9.37 MB

Build at: 2021-05-26T14:30:30.502Z - Hash: 0ec86bb170d5f5a96619 - Time: 37587ms

** Angular Live Development Server is listening on 0.0.0.0:42026, open your browser on http://localhost:42026/ **


√ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-05-26T14:30:37.172Z - Hash: c6c01dceca6c1205b01e - Time: 5358ms

√ Compiled successfully.```

[simeyla]

@alan-agius4 I'm running on Windows and assuming by polling you mean the watch option I am in fact seeing differing behavior:

With --watch true:

And with --watch false:

This is for node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --disable-host-check --public-host=example.com:44300 --watch=true

[alan-agius4]

@simeyla by polling I mean using the --polling option. That said, follow latest reports it doesn't appear to be related to polling.