Infinite loop when save a change (Angular 16)

oshilaRightS commented 1 year ago

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

Don't known / other

Is this a regression?

Yes

Description

hi, I am using Angular 16. Recently we faced this issue. The issue is, when we save even a slight change in the code, it result to refresh the web app for 10-20s (like 20-30 times refreshing during that time). I am not sure this have any connection with the web broswer (as earlier it only happened to Chrome, and I was able to work without any issue on Firefox), but after a update Chrome also started to work. But now Version 116.0.5845.180 (Official Build) (64-bit) updated yesterday and since then, loop started. and even in Firefox as well now. I am not exactly sure what is causing this issue, but defiantly not a code effect.

this is some logs from Firefox. [webpack-dev-server] App updated. Reloading... polyfills.js:6314:28 [webpack-dev-server] Disconnected! polyfills.js:6314:28 [webpack-dev-server] Trying to reconnect... polyfills.js:6314:28 [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. polyfills.js:6314:28 This page uses the non standard property "zoom". Consider using calc() in the relevant property values, or using "transform" along with "transform-origin: 0 0". games [webpack-dev-server] App updated. Reloading... polyfills.js:6314:28 Navigated to http://localhost:4200/games Failed to load 'http://localhost:4200/vendor.js'. A ServiceWorker intercepted the request and encountered an unexpected error. ngsw-worker.js:1278:12 Loading failed for the module with source "http://localhost:4200/vendor.js". games:117:215 [webpack-dev-server] Disconnected! polyfills.js:6314:28 [webpack-dev-server] Trying to reconnect... polyfills.js:6314:28 [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. polyfills.js:6314:28 This page uses the non standard property "zoom". Consider using calc() in the relevant property values, or using "transform" along with "transform-origin: 0 0". games Navigated to http://localhost:4200/games [webpack-dev-server] App updated. Reloading...

and this is some logs from Chrome, [webpack-dev-server] App updated. Recompiling... index.js:485 [webpack-dev-server] App updated. Reloading... Navigated to http://localhost:4200/games polyfills.js:1 [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. Angular is running in development mode. Service Worker registered with scope: http://localhost:4200/ [webpack-dev-server] App updated. Reloading... [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. [webpack-dev-server] App updated. Reloading... polyfills.js:1 [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. 2Navigated to http://localhost:4200/games

Different kind of logs, but same result.

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 (run `ng version`)

"dependencies": {
    "@angular/animations": "^16.1.2",
    "@angular/cdk": "^16.1.2",
    "@angular/common": "^16.1.2",
    "@angular/compiler": "^16.1.2",
    "@angular/core": "^16.1.2",
    "@angular/forms": "^16.1.2",
    "@angular/material": "^16.1.2",
    "@angular/platform-browser": "^16.1.2",
    "@angular/platform-browser-dynamic": "^16.1.2",
    "@angular/router": "^16.1.2",
    "@angular/service-worker": "^16.1.2",
    "@azure/msal-angular": "3.0.4",
    "@azure/msal-browser": "3.1.0",
    "@microsoft/signalr": "^5.0.9",
    "@ngrx/effects": "^16.0.1",
    "@ngrx/store": "^16.0.1",
    "@ngrx/store-devtools": "^16.0.1",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "date-fns": "^2.21.1",
    "js-brasil": "2.5.3",
    "lazysizes": "^5.3.2",
    "ngx-countdown": "^13.0.0",
    "ngx-device-detector": "^6.0.2",
    "ngx-google-analytics": "^14.0.1",
    "ngx-mask": "^16.2.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "xmldom": "^0.6.0",
    "xpath": "^0.0.32",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.1.1",
    "@angular/cli": "^16.1.1",
    "@angular/compiler-cli": "^16.1.2",
    "@ngrx/schematics": "^14.3.2",
    "@types/jasmine": "^4.3.5",
    "@types/node": "^12.11.1",
    "@types/uuid": "^8.3.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "^5.0.1",
    "jasmine-marbles": "^0.9.2",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-junit-reporter": "^2.0.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "5.1.3"
  }

Anything else?

No response

alan-agius4 commented 1 year ago

Duplicate of https://github.com/angular/angular/issues/47455

angular-automatic-lock-bot[bot] commented 11 months ago

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

angular / angular-cli