NOT SUPPORTED: keyword "id", use "$id" for schema ID : TSLint (ng add @angular-eslint/schematics)

Question

I am upgrading my Angular 10 application to Angular 13. I did well with other compatibilities of dependencies. The project is compiling and working fine. Now the time for TSLint I tried to update the lint with the below command.

ng add @angular-eslint/schematics

But getting the error message:

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

Footway

angular-eslint does not have a stable version which supports Angular 13 yet, see this GitHub issue: github.com/angular-eslint/angular-eslint/issues/790 – Hetman

I've been running into same issues with same versions today (v10 to v13). So far I've got it to install by deleting package lock and node_modules then running ng add @angular-eslint/schematics@next – Bundelkhand

Answer 1

For eslint:

ng add @angular-eslint/schematics@12 #for angular 12

ng add @angular-eslint/schematics@13 #for angular 13

ng add @angular-eslint/schematics@14 #for angular 14

Wandering

You can specify more, with @14.2.0, for example, these days. (but @14.2.10 will be excessive: it won't match at this level of detail). – Burletta

Answer 2

ng add @angular-eslint/schematics@next

This worked for me github.com/angular-eslint/angular-eslint/issues/790.

Credent

This worked for me when upgrading to Angular 14. Thanks! – Thadthaddaus

Answer 3

I solved the problem downgrading angular cli version to 12

Embrocation

Answer 4

It seams that a lot of packages throw this error. I had the same error when adding NgRx store. It looks like that installing the latest version of the packages usually fix the issue:

ng add package_name/@latest

Misquotation

Thanks, this worked for me with @angular/pwa: ng add @angular/pwa@latest --project MyProjectName. The project is using Angular 14. – Sinful

Answer 5

I faced the same issue in Angular 14, IONIC 6 project while generating pages/components . And resolved it by replacing id with $id manually on following paths:

1. node_modules > @Ionic > angular-toolkit > schematics > page > schema.json > replace id with $id on line 3.

2. node_modules > @Ionic > angular-toolkit > schematics > component > schema.json > replace id with $id on line 3.

Footless

doing npm i @ionic/angular-toolkit@latest --save-dev solved this for me with angular@16 and Ionic@6 – Panchito

Answer 6

I had the same problem. I could fix it by by upgrading angular/universal to the same version as my angular version is.

Dentiform

Answer 7

For me, just by adding the most current version, did it:

ng add @angular/[email protected]

The list of versions are here available.

Orogeny

Answer 8

It appear while I'm using angular 14, after upgrading angular 15(before that reinstalling angular cli) resolve problem for me.

Emphasize

Answer 9

Install manually the version of @angular/pwa corresponding to your version of angular and then run "ng add @angular/pwa"

Remembrance

Answer 10

Check if your versions match ng version

In my case, I was working with angular universal for server-side rendering.

My angular version was 17 which means that this ng add @nguniversal/express-engine will be dropped in favor of this ng add @angular/ssr

Arvizu

ty for sharing...angular still has the old documentations online suggessting to use the old @nguniversal – Hectometer

Answer 11

I had a conflict where the third-party package I was using had been replaced by an official one, but for some reason I had both of them in my package.json file The real issue though was that the angular.json file was using the older builder instead of the newer one. I removed the package and used ng add to add the new package via its schematic, and after that things started working properly.

Brassie

Answer 12

Check if your versions match ng version

Mine was:

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            11.0.5
@angular-devkit/schematics      15.2.8 (cli-only)
@angular/cli                    15.2.8
@nguniversal/builders           11.0.1
@nguniversal/express-engine     15.2.1
@schematics/angular             15.2.8 (cli-only)
rxjs                            7.5.0
typescript                      4.9.5

So you see, @angular-devkit/architect needed to be 0.15 and @nguniversal/builders needed to be on 15 as well in my case.

From this github post:

1. Remove your node_modules and delete your lock file and rebuild it with a fresh install
2. Force clean your global npm cache (npm clear cache --force)
3. delete your npx cache (on a mac that is rm -rf ~/.npm/_npx)

The first step was sufficient for me.

Caleb