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

Question

I did upgrade from Angular 9 to Angular14 version. I am getting a issue, when I am running cli commands ng g c component name getting below error. An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "C:\Users\Username\AppData\Local\Temp\ng-9iFe21\angular-errors.log" for further details.

I tired couple of solutions like updating @angular-eslint/schematics but no luck.

here is my package.json file,

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

Please help me what is going wrong.

LOG:

[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)

Does this help? https://stackoverflow.com/questions/69895552/not-supported-keyword-id-use-id-for-schema-id-tslint-ng-add-angular-e — Krokomot, Jun 23 '23 at 00:43
Sounds like your issue is in a json schema, not package.json — Evert, Jun 23 '23 at 00:48
Hi @Evert Sorry not understood JSON schema means ? can you please elaborate. Thank you! — Praveen Bomminani, Jun 23 '23 at 02:29
@PraveenBomminani, please post what you see in C:\Users\Username\AppData\Local\Temp\ng-9iFe21\angular-errors.log too. And which version of angular are you using globally? — Julian W., Jun 23 '23 at 02:57
Hi @JulianLin, I am using Angular 14 globally as well. I am providing log in ticket. — Praveen Bomminani, Jun 23 '23 at 13:10

score 0 · Answer 1 · answered Jun 23 '23 at 03:02

0

Update the following dependencies to version 14 too.

"@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",

Please refer what I have in my Angular 14 project.

"@angular-eslint/builder": "14.4.0",
"@angular-eslint/eslint-plugin": "14.4.0",
"@angular-eslint/eslint-plugin-template": "14.4.0",
"@angular-eslint/schematics": "14.4.0",
"@angular-eslint/template-parser": "14.4.0",

And also try to update the global Angular CLI version to 14 with npm i @angular/cli@14 -g.

If it still doesn't work, delete node_modules, clear npm cache, and do the npm install again.

answered Jun 23 '23 at 03:02

Julian W.

1,501
7
20

Hi @Julian Lin, Thank you for helping me to fix this issue. I tried updating eslint versions and deleted node modules, clear npm cache.. but no luck still showing same issue. – Praveen Bomminani Jun 23 '23 at 13:18
I have added Error showing in Log.. Log added in description of issue . Please suggest if I am missing anything. – Praveen Bomminani Jun 23 '23 at 13:20
@PraveenBomminani, can you see `node_modules\@angular\cli\node_modules\ajv\dist\vocabularies\core\id.js` file in your project? I checked my project but can't find that file in node_modules. Will you check `node_modules/@angular/cli/package.json` file to check which cli version was installed? – Julian W. Jun 25 '23 at 15:43
Hi @Julian Lin in package.json its showing "@angular/cli": "^14.2.10", version. inside node_modules/@angular/cli/package.json. same as my project package.json file. and below code showing inside node_modules\@angular\cli\node_modules\ajv\dist\vocabularies\core\id.js file. "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const def = { keyword: "id", code() { throw new Error('NOT SUPPORTED: keyword "id", use "$id" for schema ID'); }, }; exports.default = def; //# sourceMappingURL=id.js.map – Praveen Bomminani Jun 26 '23 at 12:49

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

1 Answers1