Angular 12 Compilation is not immediately happening after any html, scss, ts file save

I upgraded my angular project from 8 to 12. After that I migrated to eslint. Then onwards my compilation is not immediately invoked after saving any file. If I save any file after 2min the compilation starts in the terminal.

This is the issue I’m facing. Thanks in advance. Please let me know what is causing it to be slow and time taking. Is it with vscode or Angular config issues.

Package.json

{
  "name": "xxxxx",
  "version": "0.0.0",
  "scripts": {
    "dev": "ng serve --live-reload true",
    "build": "ng build",
    "build_prod": "ng build --prod",
    "test": "ng test",
    "lint": "eslint -c .eslintrc.js --ext .ts ./src",
    "lint:fix": "npm run lint -- --fix",
    "e2e": "ng e2e"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "pre-push": "npm run lint"
    }
  },
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.0.2",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/material": "^12.0.2",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@arcgis/core": "^4.19.3",
    "@mapbox/mapbox-gl-geocoder": "^4.7.1",
    "@ngrx/effects": "^12.0.0",
    "@ngrx/store": "^12.0.0",
    "echarts": "^5.1.1",
    "esri-loader": "^2.16.0",
    "mapbox-gl": "^0.54.1",
    "ng-pick-datetime": "^7.0.0",
    "ngx-color": "^4.1.0",
    "ngx-echarts": "^5.2.2",
    "ngx-mapbox-gl": "^6.0.4",
    "ngx-material-timepicker": "^5.4.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular-eslint/eslint-plugin": "^12.1.0",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@angular/language-service": "~12.0.3",
    "@babel/compat-data": "7.8.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.9",
    "@types/mapbox-gl": "^0.51.12",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^4.26.0",
    "@typescript-eslint/eslint-plugin-tslint": "^4.26.0",
    "@typescript-eslint/parser": "^4.26.0",
    "codelyzer": "^6.0.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsdoc": "^35.1.2",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "husky": "^3.0.9",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "moment-locales-webpack-plugin": "^1.2.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~4.2.4"
  }
}

Tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "allowedCommonJsDependencies": [
    "moment"
  ],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": true 
  }
}

Answer

This is solved. It is caused because of serve configuration doesn’t have the development mode configuration set in angular.json file. May be this cofiguration is removed when im upgrading to Angular 12 but not sure.

After adding the below two code blocks, My compilation issue is fixed and its immediately recompiles when a file is saved.

"configurations": {
                  "production": {
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "500kb",
                      "maximumError": "1mb"
                    },
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "2kb",
                      "maximumError": "4kb"
                    }
                  ],
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
                },
                "development": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": true,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "namedChunks": true
                }
              }
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "projectName:build:production"
            },
            "development": {
              "browserTarget": "projectName:build:development"
            }
          },
          "defaultConfiguration": "development"
        }

Add these two code blocks in Angular.json compilation issue fixed.