Angular 14中ng lint命令无法运行的问题求助

问题描述 #

在 Angular 14 项目执行 ng lint 命令时，持续报错：

Cannot find "lint" target for the specified project. You can add a package that implements these capabilities.

安装 @angular-eslint/schematics 后问题仍未解决，项目相关配置如下：

package.json 配置 #

{
    "name": "xyz",
    "version": "0.0.0",
    "scripts": {
        "build": "ng build",
        "build:app": "ng build xyz --configuration production",
        "doc:app": "./node_modules/.bin/compodoc -p src/tsconfig.app.json -t --hideGenerator -d \"dist/docs/app\"",
        "e2e": "ng e2e pjms-admin-e2e --webdriver-update=false",
        "e2e:ci": "ng e2e xyz-e2e --webdriver-update=false --protractor-config=./e2e/protractor-ci.conf.js",
        "lint": "ng lint",
        "lint:app": "ng lint xyz",
        "ng": "ng",
        "postbuild:app": "npm run doc:app",
        "pree2e": "webdriver-manager update --ignore_ssl=true --gecko false",
        "start": "ng serve",
        "start:hmr": "ng serve --port 4201 --hmr -c=hmr",
        "start:subpath": "ng serve --port 4202 --serve-path=/test/ --base-href=/test/",
        "test": "ng test"
    },
    "private": true,
    "dependencies": {
        "angular/animations": "^14.2.8",
        "@angular/cdk": "^14.2.6",
        "@angular/common": "^14.2.8",
        "@angular/compiler": "^14.2.8",
        "@angular/core": "^14.2.8",
        "@angular/flex-layout": "^14.0.0-beta.40",
        "@angular/forms": "^14.2.8",
        "@angular/material": "^14.2.6",
        "@angular/platform-browser": "^14.2.8",
        "@angular/platform-browser-dynamic": "^14.2.8",
        "@angular/router": "^14.2.8",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "core-js": "^2.6.5",
        "mat-table-exporter": "^10.2.4",
        "ngx-filesize": "^2.0.16",
        "node-sass": "^4.14.1",
        "rxjs": "~6.6.7",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.7",
        "@angular/cli": "^14.2.7",
        "@angular/compiler-cli": "^14.2.8",
        "@angular/language-service": "^14.2.8",
        "@angularclass/hmr": "^2.1.3",
        "@compodoc/compodoc": "^1.1.3",
        "@types/googlemaps": "^3.39.12",
        "@types/jasmine": "~3.6.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.0",
        "cpx": "^1.5.0",
        "jasmine-core": "~3.6.0",
        "jasmine-reporters": "^2.3.1",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~6.4.1",
        "karma-chrome-launcher": "~3.1.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "karma-junit-reporter": "^1.2.0",
        "protractor": "~7.0.0",
        "protractor-console-plugin": "^0.1.1",
        "puppeteer": "^1.5.0",
        "ts-node": "~7.0.0",
        "tslint": "~6.1.0",
        "typescript": "~4.6.4"
    }
}

angular.json 配置片段 #

"lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
            "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
            ],
            "exclude": [
                "**/node_modules/**"
            ]
        }
    }

问题根源 #

1. Angular 14 已全面弃用 TSLint，官方推荐使用 ESLint，但当前配置仍在使用旧的 TSLint 构建器 @angular-devkit/build-angular:tslint
2. 仅安装 @angular-eslint/schematics 不足以完成 ESLint 配置，缺少配套的 ESLint 依赖包
3. package.json 中存在依赖笔误：angular/animations 应为 @angular/animations，可能导致依赖加载异常

解决步骤 #

1. 清理旧的 TSLint 相关依赖 #

执行命令卸载不再需要的 TSLint 工具链：

npm uninstall tslint codelyzer

2. 安装完整的 Angular ESLint 依赖 #

安装适配 Angular 14 的 ESLint 相关包：

npm install --save-dev @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics @angular-eslint/template-parser eslint eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-prefer-arrow

3. 修正 package.json 中的依赖笔误 #

将 dependencies 里的 angular/animations 修改为 @angular/animations，然后执行：

npm install

4. 更新 angular.json 的 lint 配置 #

将原有的 TSLint 构建器替换为 Angular ESLint 构建器，确保配置位于项目的 architect 节点下（例如 projects.xyz.architect.lint）：

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "lintFilePatterns": [
      "src/**/*.ts",
      "src/**/*.html"
    ]
  }
}

5. 转换规则并生成 ESLint 配置文件 #

执行以下命令将原有的 TSLint 规则转换为 ESLint 规则，并生成 .eslintrc.json 配置文件：

ng g @angular-eslint/schematics:convert-tslint-to-eslint xyz

6. 验证修复效果 #

执行以下命令测试 lint 功能是否正常：

ng lint
# 或指定项目
ng lint xyz

内容的提问来源于stack exchange，提问作者Lane T