Angular 12 编译不会在任何 html、scss、ts 文件保存后立即发生

Question

我将我的 angular 项目从 8 升级到 12。之后我迁移到 eslint。然后在保存任何文件后不会立即调用我的编译。如果我在 2 分钟后保存任何文件，编译将在终端中开始。

这就是我面临的问题。提前致谢。 请让我知道是什么导致它缓慢且耗时。是 vscode 还是 Angular 配置问题。

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 1

已解决。 这是因为serve配置没有在angular.json[=22中设置development模式配置=] 文件。当我升级到 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 中添加这两个代码块，编译问题已修复。