0

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 
  }
}
Bertramp
  • 376
  • 1
  • 15
thejus557
  • 78
  • 6
  • 1
    `ng serve --live-reload true` is wrong syntax, and unnecessary. `ng serve` should be enough, live reloads are made by default, according to the [documentation](https://angular.io/cli/serve). – JSON Derulo Jun 17 '21 at 07:12
  • This is a possible duplicate to the question answered here. [Question on reloading](https://stackoverflow.com/questions/44335456/angular-cli-auto-reload-doesnt-happen) – Code_beginner Jun 17 '21 at 07:18
  • ng serve is also taking time. – thejus557 Jun 17 '21 at 09:45

1 Answers1

2

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.

thejus557
  • 78
  • 6