How to run @angular-eslint/schematics:convert-tslint-to-eslint

Question

I'm trying to switch an Angular project from TSLint to ESLint, following the instructions in angular-eslint Github repo.

I ran ng add @angular-eslint/schematics which added the following dependencies to my package.json:

    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "eslint": "7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",

Also, ran npm install to ensure these are all installed.

Now I'm instructed to run:

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

However, this results in errors:

Unknown option: '--remove-tslint-if-no-more-tslint-targets'
Unknown option: '--ignore-existing-tslint-config'

When I remove these options, I get another error:

Invalid rule result: Instance of class Promise.

It seems like this angular-eslint schematic was not installed properly. However, I'm a complete novice regarding these schematics. I must be missing something obvious here.

Using @angular/cli 10.2.3.

Answer 1

If you're migrating an existing project then you should run either

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

or

ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}

instead of

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

as per the guidelines https://github.com/angular-eslint/angular-eslint#step-2---run-the-convert-tslint-to-eslint-schematic-on-a-project

Answer 2

Try running the following commands and see if it works:

npm install @schematics/angular@latest -g  
remove node_modules 
remove package-lock.json    
npm install

Answer 3

In case you don't know which is the name of your project when the CLI asks you

Which project would you like to convert from TSLint to ESLint?

it can be found in the angular.json under the projects attribute (normally on line 8)

Answer 4

It depends on the Angular version of your project because it install a different version of @angular-eslint/schematics for different angular versions

Steps will be:

A. Add @angular-eslint to your project:

ng add @angular-eslint/schematics

If you have an Angular 12 project (without tslint), you’re done!

B. For migration from tslint Angular 11 or 12, run the following:

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets

(Use: --ignore-existing-tslint-config flag only if you want to ignore old tslint configuration)

If you are on Angular 9 or 10, an older version of the schematic gets installed and the convert command differs slightly. You may want to prioritize upgrading Angular before converting to ESLint. But if you really want to upgrade linting first, use this command:

ng g @angular-eslint/schematics:convert-tslint-to-eslint <project-name-here>

Detailed blog for tslint to eslint migration

Answer 5

I am using Angular 14. I ran

ng add @angular-eslint/schematics@14

Instead of

ng add @angular-eslint/schematics

And my linting started working using the command ng lint

Until then I was receiving error:

NOT SUPPORTED: keyword "id", use "$id