Add component fails with Eslint error

Eslint package invalid

# ng g c login
An unhandled exception occurred: Collection “@angular-eslint/schematics” cannot be resolved.

Trying to fix the problem by installing latest Eslint package

Got Error
Using package manager: npmlar-oidc-authorization-sample> ng add @angular-eslint/schematics
√ Found compatible package version: @angular-eslint/schematics@1.0.0.
√ Package information loaded.

The package @angular-eslint/schematics@1.0.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
NOT SUPPORTED: keyword “id”, use “$id” for schema ID

–> Stil got an error !!

Final Fix: Install matching ESLint package

After v14-lts release, if you are using any specific Angular major version, it is better to install schematics matching the Angular version.
For example, I’m using Angular v14-lts, so I’m installing schematics this way:

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

Using package manager: npmlar-oidc-authorization-sample>ng lint
√ Package information loaded.

The package @angular-eslint/schematics@14 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.

All @angular-eslint dependencies have been successfully installed 🎉

Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.

UPDATE package.json (1604 bytes)
√ Packages installed successfully.

Reference

• https://github.com/angular-eslint/angular-eslint/issues/790