Skip to content

Angular 20 on esbuild doesn't hot reload any file changes in dev mode #33120

@VishnuSalimidi

Description

@VishnuSalimidi

Is this a bug report or a feature request?

  • Bug Report
  • Feature Request

Please provide the steps to reproduce the issue [Bug Report only]

Hi,

I am encountering an issue with Angular 20 with esbuild and Node V22, where the automatic re rendering of changes upon saving files does not happen in dev mode when using npm start (ng serve). The application neither updates the UI nor throws any errors, and it requires a restart to reflect the changes. This issue happens on every change in the front end file.

Steps to Reproduce:

  1. Run the application using npm start.
  2. Make changes to a component or service.
  3. Save the file.

Please provide the expected behavior vs the actual behavior you encountered [Bug Report only]

Expected Behavior: The application need to re compile on each change in front end file and reflect the changes.
Actual Behavior: file changes are detected and the rebuilding takes forever

Please provide a screenshot if possible [Bug Report only]

Image

Please provide the exception or error you saw [Bug Report only]


Is this a browser-specific issue? If so, please specify the device, browser, and version. [Bug Report only]


Description [Feature Request only]

No response

Proposed solution [Feature Request only]

No response

Alternatives considered [Feature Request only]

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-web": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist"
            },
            "index": "src/index.html",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": [
              "src/polyfills.ts"
            ],
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/config.json"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/jquery-ui/dist/themes/base/jquery-ui.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/moment/moment.js",
              "node_modules/jquery-ui/dist/jquery-ui.js"
            ],
            "allowedCommonJsDependencies": [
              "jquery", 
              "ajv"
            ],
            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "dev": {
              "sourceMap": true,
              "optimization": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "test-web:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "test-web:build:production"
            },
            "dev": {
              "buildTarget": "test-web:build:dev"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "test-web:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/moment/moment.js"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "test-web-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  },
  "cli": {
    "analytics": false
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: @angular/cligemini-triagedLabel noting that an issue has been triaged by geminineeds: repro stepsWe cannot reproduce the issue with the information given

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions