Angular 12.0.1 builds multiple times on startup and on file changes #20891

paulaustin-automutatio · 2021-05-21T13:12:08Z

🐞 Bug report

Command (mark with an `x`)

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?

The text was updated successfully, but these errors were encountered:

paulaustin-automutatio · 2021-05-21T18:03:36Z

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 · 2021-05-21T18:29:53Z

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 · 2021-05-22T23:35:40Z

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

Ristaaf · 2021-05-25T08:09:08Z

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 · 2021-05-25T13:45:13Z

@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 · 2021-05-26T08:42:14Z

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

paulaustin-automutatio · 2021-05-26T14:36:32Z

@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 · 2021-05-28T08:49:31Z

@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 · 2021-05-28T09:37:42Z

@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 · 2021-05-28T11:55:34Z

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 · 2021-05-30T04:44:20Z

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.

This caused Webpack to mark all TypeScript files as removed after the first compilation on Windows because the file separators didn't match Closes #20891

This caused Webpack to mark all TypeScript files as removed after the first compilation on Windows because the file separators didn't match Closes #20891 (cherry picked from commit 3afa556)

simeyla · 2021-06-02T23:36:14Z

@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 · 2021-06-03T06:32:57Z

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 · 2021-06-04T18:57:02Z

@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 · 2021-06-04T19:00:18Z

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 · 2021-06-04T19:29:39Z

@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 · 2021-06-15T07:13:34Z

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 · 2021-07-26T08:08:04Z

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.}

This caused Webpack to mark all TypeScript files as removed after the first compilation on Windows because the file separators didn't match Closes angular#20891

acohenOT mentioned this issue May 21, 2021

Angular 12 : Loading svg using url(../../assets/images/app_logo.svg) is not working in Scss #20882

Closed

15 tasks

alan-agius4 added area: @angular-devkit/build-angular needs: investigation Requires some digging to determine if action is needed labels May 22, 2021

ngbot bot modified the milestone: needsTriage May 22, 2021

alan-agius4 added the freq1: low Only reported by a handful of users who observe it rarely label May 22, 2021

alan-agius4 mentioned this issue May 28, 2021

fix(@ngtools/webpack): normalize paths when adding file dependencies #20984

Merged

alan-agius4 self-assigned this May 28, 2021

ngbot bot modified the milestones: needsTriage, Backlog May 28, 2021

alan-agius4 mentioned this issue May 31, 2021

Angular 12 is much slower in compiling (production and watch mode) then Angular 11 #20989

Closed

filipesilva closed this as completed in #20984 May 31, 2021

This was referenced Jun 2, 2021

serve command: double processing in CLI 12 > Browser application bundle generation complete. #20809

Closed

ng serve and ng build is very slow angular/angular#42100

Closed

leosvelperez mentioned this issue Jun 23, 2021

Angular Universal dev:ssr doesn't work after upgrade to v12.3.5 nrwl/nx#5848

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 12.0.1 builds multiple times on startup and on file changes #20891

Angular 12.0.1 builds multiple times on startup and on file changes #20891

paulaustin-automutatio commented May 21, 2021

paulaustin-automutatio commented May 21, 2021

paulaustin-automutatio commented May 21, 2021

inidaname commented May 22, 2021 •

edited

Loading

Ristaaf commented May 25, 2021

paulaustin-automutatio commented May 25, 2021

alan-agius4 commented May 26, 2021 •

edited

Loading

paulaustin-automutatio commented May 26, 2021 •

edited

Loading

simeyla commented May 28, 2021 •

edited

Loading

alan-agius4 commented May 28, 2021

alan-agius4 commented May 28, 2021

simeyla commented May 30, 2021 •

edited

Loading

simeyla commented Jun 2, 2021 •

edited

Loading

alan-agius4 commented Jun 3, 2021 •

edited

Loading

simeyla commented Jun 4, 2021 •

edited

Loading

clydin commented Jun 4, 2021 •

edited

Loading

simeyla commented Jun 4, 2021 •

edited

Loading

jvalkeejarvi commented Jun 15, 2021

angular-automatic-lock-bot bot commented Jul 26, 2021

Angular 12.0.1 builds multiple times on startup and on file changes #20891

Angular 12.0.1 builds multiple times on startup and on file changes #20891

Comments

paulaustin-automutatio commented May 21, 2021

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🌍 Your Environment

paulaustin-automutatio commented May 21, 2021

paulaustin-automutatio commented May 21, 2021

inidaname commented May 22, 2021 • edited Loading

Ristaaf commented May 25, 2021

paulaustin-automutatio commented May 25, 2021

alan-agius4 commented May 26, 2021 • edited Loading

paulaustin-automutatio commented May 26, 2021 • edited Loading

simeyla commented May 28, 2021 • edited Loading

alan-agius4 commented May 28, 2021

alan-agius4 commented May 28, 2021

simeyla commented May 30, 2021 • edited Loading

simeyla commented Jun 2, 2021 • edited Loading

alan-agius4 commented Jun 3, 2021 • edited Loading

simeyla commented Jun 4, 2021 • edited Loading

clydin commented Jun 4, 2021 • edited Loading

simeyla commented Jun 4, 2021 • edited Loading

jvalkeejarvi commented Jun 15, 2021

angular-automatic-lock-bot bot commented Jul 26, 2021

Command (mark with an `x`)

inidaname commented May 22, 2021 •

edited

Loading

alan-agius4 commented May 26, 2021 •

edited

Loading

paulaustin-automutatio commented May 26, 2021 •

edited

Loading

simeyla commented May 28, 2021 •

edited

Loading

simeyla commented May 30, 2021 •

edited

Loading

simeyla commented Jun 2, 2021 •

edited

Loading

alan-agius4 commented Jun 3, 2021 •

edited

Loading

simeyla commented Jun 4, 2021 •

edited

Loading

clydin commented Jun 4, 2021 •

edited

Loading

simeyla commented Jun 4, 2021 •

edited

Loading