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

1 回答 1

2

这解决了。这是因为serve配置没有在angular.json文件中设置开发模式配置造成的。当我升级到 Angular 12 但不确定时，可能会删除此配置。

添加以下两个代码块后，我的编译问题得到修复，并在保存文件时立即重新编译。

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

在Angular.json中添加这两个代码块编译问题已修复。

于 2021-06-17T13:35:18.197 回答