Angular 12.0.1 builds multiple times on startup and on file changes

[paulaustin-automutatio]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [ ] build
• [x] 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.

[alan-agius4]

Thanks to @elvisbegovic who offered multiple team viewer sessions. I managed to get to the bottom of this and have PR in flight #20984 to address this.

[simeyla]

I believe this also breaks --hmr under Windows.

For a routed component, I was getting ActivationStart navigation events but then nothing happened. Turning off hmr fixed it.

I did not see the issue when copying the project over to WSL2 under Ubuntu (where this bug is not present).

I'm hoping this issue will cover it too. I think something gets corrupted and out of sync because the hot-update is generated before it's even served the original bundle. Reloading the browser doesn't fix it.

[simeyla]

@alan-agius4 When will this be released? It wasn't in 12.0.3? I thought this would be in the 'show stopper' category and not just in 12.1.next. Thx

[alan-agius4]

This fix is available in @ngtools/webpack version 12.0.3 which is a direct dependency of @angular-devkit/build-angular of the same version.

[simeyla]

@alan-agius4 unfortunately this seems to still be occuring on 12.0.3. After the initial prompt to open my browser I get another build with a report on unchanged chunks.

I created a new empty project with this sequence of commands, first verifying I'm on 12.0.3.

PS C:\temp\angular12\angular12-b> ng version
...
Angular CLI: 12.0.3
Node: 12.16.0
Package Manager: npm 6.10.3
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.3 (cli-only)
@angular-devkit/core         12.0.3 (cli-only)
@angular-devkit/schematics   12.0.3 (cli-only)
@schematics/angular          12.0.3 (cli-only)

PS C:\temp\angular12\angular12-b> ng new rebuildtest

...

PS C:\temp\angular12\angular12-b> cd .\rebuildtest\
PS C:\temp\angular12\angular12-b\rebuildtest> ng serve
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Would you change your mind, the following
command will disable this feature entirely:

    ng analytics project off

- Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.38 MB
polyfills.js          | polyfills     | 508.82 kB
styles.css, styles.js | styles        | 381.00 kB
main.js               | main          |  54.83 kB
runtime.js            | runtime       |   6.58 kB

                      | Initial Total |   3.30 MB

Build at: 2021-06-04T18:10:26.503Z - Hash: 6c750b135d706b1fbb2d - Time: 22092ms

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

√ Compiled successfully.
√ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-06-04T18:10:28.030Z - Hash: 6c750b135d706b1fbb2d - Time: 983ms

√ Compiled successfully.

For an empty project the second build takes less than a second, but in my actual project it takes an additional 33 seconds, during which the URL does not respond.

I'm happy to check anything else if you need, but this was easily repeatable on Windows 10 with a new project.

Just for the record here is package.json for that project, but I made no changes to it:

{
  "name": "rebuildtest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",5
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

And "C:\Temp\angular12\angular12-b\rebuildtest\node_modules\@ngtools\webpack\package.json" does indicate 12.0.3

[clydin]

Does it happen when ngcc doesn't run (the Compiling @angular/common : es2015 as esm2015 and similar lines)? ngcc rewrites the node modules directory which can trigger a rebuild.

[simeyla]

@clydin I ran it again and was about to say you're right... ...but then I ran it again and it built twice!

My own project seems to build twice every single time.

So it may be some kind of race condition where a file is generated into the source tree and there's a 50/50 change it'll get picked up during that same build as a change. For a large build it would always get picked up, but for a trivial project it's hit or miss! It doesn't appear to be an odd/even issue because I just got three sequential builds with no rebuild. That's just a complete guess.

It's actually my birthday today so I'm going to leave this for now, but if you have any other ideas I'll check as soon as I can :-) Thanks for the quick response.

Here's some sample timings running ng serve in succession. Again this is the brand new project, browser not even open and project not open in IDE.

9318ms 9208ms + 357ms 10073ms 9324ms + 345ms 9378ms 9813ms 9493ms 9265ms 9731ms 10087ms 9360ms 9271ms 9339ms 9322ms 9192ms 9305ms 9103ms

[jvalkeejarvi]

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)

Thanks a lot @Ristaaf, this fixed the issue in our Angular application.

[angular-automatic-lock-bot[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.}