Angular9升级至14后执行ng g c命令报错：keyword 'id'不支持

问题重现 #

将Angular从9升级到14后，执行CLI命令ng g c component-name时触发以下错误：

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

已尝试更新@angular-eslint/schematics但未解决，相关依赖配置及错误日志如下：

package.json依赖 #

"dependencies": {
    "@angular/animations": "^14.2.12",
    "@angular/common": "^14.2.12",
    "@angular/compiler": "^14.2.12",
    "@angular/core": "^14.2.12",
    "@angular/forms": "^14.2.12",
    "@angular/localize": "^14.2.12",
    "@angular/platform-browser": "^14.2.12",
    "@angular/platform-browser-dynamic": "^14.2.12",
    "@angular/router": "^14.2.12",
    "@fingerprintjs/fingerprintjs": "^3.0.6",
    "@kolkov/angular-editor": "^1.1.4",
    "@ng-bootstrap/ng-bootstrap": "6.1.0",
    "@ngx-translate/core": "^12.0.0",
    "@ngx-translate/http-loader": "^5.0.0",
    "@types/file-saver": "^1.3.0",
    "@types/html2canvas": "0.0.36",
    "@types/jspdf": "^1.3.3",
    "@types/xlsx": "0.0.36",
    "angular-cropperjs": "^1.0.2",
    "angular-in-memory-web-api": "^0.9.0",
    "autoprefixer": "^10.4.5",
    "bootstrap": "^4.6.0",
    "bootswatch": "^4.4.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.12",
    "cropperjs": "^1.4.1",
    "crypto-js": "^3.1.9-1",
    "file-saver": "^1.3.8",
    "font-awesome": "^4.7.0",
    "html2canvas": "1.0.0-alpha.12",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.5.3",
    "moment": "^2.29.4",
    "ngx-device-detector": "1.4.1",
    "ngx-xml2json": "^1.0.2",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.5.4",
    "sax": "^1.2.4",
    "stream": "0.0.2",
    "stream-browserify": "^2.0.2",
    "timers": "^0.1.1",
    "timers-browserify": "^2.0.11",
    "tslib": "^2.0.0",
    "url-search-params-polyfill": "^5.0.0",
    "xlsx": "^0.18.5",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.10",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "12.7.0",
    "@angular-eslint/eslint-plugin-template": "12.7.0",
    "@angular-eslint/schematics": "12.7.0",
    "@angular-eslint/template-parser": "12.7.0",
    "@angular/cli": "^14.2.10",
    "@angular/compiler-cli": "^14.2.12",
    "@angular/language-service": "^14.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^12.12.31",
    "@types/xml2js": "^0.4.5",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "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",
    "protractor": "~7.0.0",
    "sass": "^1.58.3",
    "ts-node": "~4.1.0",
    "typescript": "~4.6.4"
  }

错误日志 #

[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
    at keywordCode (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:454:13)
    at C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:222:17
    at CodeGen.code (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)
    at iterateKeywords (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:219:9)
    at groupKeywords (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:208:13)
    at C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:192:13)
    at CodeGen.code (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (C:\Users\username\projectname\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)

问题根源 #

错误来自@angular/cli依赖的ajv库，它要求使用$id替代旧的id关键字做Schema ID标识。但核心原因是**@angular-eslint包版本与Angular 14不兼容**——当前使用的@angular-eslint 12.x是为Angular 12设计的，其内部的Schema配置仍使用旧的id关键字，与Angular 14依赖的ajv版本冲突。

解决方案 #

1. 卸载旧版@angular-eslint相关包 #

npm uninstall @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics @angular-eslint/template-parser

2. 安装与Angular 14匹配的@angular-eslint版本 #

npm install @angular-eslint/builder@14.0.0 @angular-eslint/eslint-plugin@14.0.0 @angular-eslint/eslint-plugin-template@14.0.0 @angular-eslint/schematics@14.0.0 @angular-eslint/template-parser@14.0.0 --save-dev

3. 同步升级eslint及typescript-eslint依赖 #

Angular 14需要配套的eslint和typescript-eslint版本，执行以下命令更新：

npm install eslint@8.23.0 @typescript-eslint/eslint-plugin@5.36.2 @typescript-eslint/parser@5.36.2 --save-dev

4. 清理依赖缓存并重新安装 #

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

5. 验证修复效果 #

执行组件生成命令测试：

ng g c test-component

额外排查点 #

如果上述步骤无效，检查项目中是否存在其他第三方schematics工具（如自定义生成器）或依赖包，这些包可能仍在使用旧的Schema配置，需要同步升级到兼容Angular 14的版本。

内容的提问来源于stack exchange，提问作者Praveen Bomminani