[ng13] ng serve auto compiling infinitely without any changes

[wen9218]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

Hi, after upgrading ng13 from ng12, I got this issue. It worked well in ng v12.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 13.0.1
Angular Core: 13.0.0
Node: 14.17.3

Anything else?

No response

[JoostK]

Moving to the CLI as that's responsible for setting up watch mode. That said, without a reproduction this is unlikely to be actionable.

[alan-agius4]

Hi @Wenrong108,

Please provide the output of ng version and as @JoostK mentioned without a reproduction even shared privately it will be hard to get to the bottom of this.

[wen9218]

Hi, @alan-agius4 , here is ng version result

[alan-agius4]

• Are you using custom builders by any chance?
• Can you run npm ls @ngtools/webpack?
• Can you also try to delete node_modules, package-lock.json and run npm install again?

Another observation which is unrelated to the above issue I am seeing a number of "outdated" packages, @schematics/angular, @angular-devkit/schematics. @angular/pwa? Unless you have custom schematics these packages should not be directly in your package.json. Also, @angular/http is no longer supported.

[wen9218]

Hi, @alan-agius4. thanks for your reply.

• I never use custom builders
• npm ls @ngtools/webpack
  
• Can you also try to delete node_modules, package-lock.json and run npm install again?
  I did so many times, but nothing effect.

[alan-agius4]

@Wenrong108, in that case without a reproduction / remote debugging session it would be hard to get to the bottom of this.

[wen9218]

Hi, @alan-agius4 , by the way, why does the issue happen in only ng v13? it works well in ng v12.

[alan-agius4]

@Wenrong108, without a reproduction we cannot investigate and ascertain in what’s is causing the problem.

[vincentpalita]

I ran into the same issue, but it seems to be related to an old issue that should have been fixed in 12.0.3 when polling is enabled.
By disabling polling everything works normally again. Please view issue: #20891

[alan-agius4]

@vincentpalita, can you please provide a reproduction?

[vincentpalita]

@alan-agius4 I thought it could be related to the new cache system but when I disable it, it is still happening.

On a small repository with the poll option to 2000ms the problem will not appear.
But if you set it to 10ms it will instantly happen as soon as you save a file for example.

To reproduce (make sure you @angular/cli global package is up to date with v13):

ng new i22163
// Y to routing, and choose SCSS
cd i22163
ng serve --poll 10 --verbose

Then for example save a new line in the style.scss file of the app located in src folder.

It will then do this:

I intentionally lowered the polling to 10ms to get the problem, on our repository, which is very big (700+ libs) it happens even with 2000ms, but if we remove the option it works well again.

I am available for a remote call if you want more information!
Thank you for your help!!

This happens with the following package.json conf:

{
  "name": "i22163",
  "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": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.3",
    "@angular/cli": "~13.0.3",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.4.3"
  }
}

It does not happen with the previous version:

{
  "name": "i22163",
  "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.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "rxjs": "~6.6.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "~12.0.0",
    "@angular/compiler-cli": "~12.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "4.2.4"
  }
}

[koiosml]

I've got the same issue for even angular new version 13.0.3 :(
Why recompile again and again, also why .angular cache folder is created in the project folder?
It stores cache files in a big size over 3 GBytes.

[alan-agius4]

@vincentpalita,
I am unable to reproduce using the steps provided above. Are you using docker by any chance? Also, can you also please provide the output of ng version?

@Xumochuan,
3Gb seems quite a lot, can you please provide the size of each sub directory of cache?.
The .angular has been created in the project root for a number of reasons:

• ease of access
• immutable node_modules
• Compatibility with PNP package managers where there is no node_modules directory.

This pattern is also used by other tools one of the most popular one is Eslint, where by default it writes a cache file in the root.

You can clean the cache at any time, and also you can change the cache path if desired, See https://angular.io/cli/cache for more information.

Back to the original issue, @Xumochuan and @Wenrong108 are you also using polling?