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.

Genna

Answer 1

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)

Sardella

Thanks, this is where I was stuck. The project name is the key of your "projects" entry ... in my case it was "ng". – Plenary

Answer 2

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

Irisirisa

Thx this was what I needed: "If you have an Angular 12 project, you’re done!" - no need to run convert – Cantal

Answer 3

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

Guertin

In that case I get Invalid rule result: Instance of class Promise. error, as I already pointed out. – Genna

What is your global angular cli version? – Guertin

Both local and global are 10.2.3 – Genna

Ideally it should work. I have also migrated to eslint in angular version 10 though my global angular cli version was 11.x.x. Try updating your global cli version to latest cli. github.com/angular/angular-cli/issues/15290 adding it for reference. – Guertin

No difference. Except that I also get a warning about a mismatch between local and global versions of angular-cli. – Genna

Perhaps I'll try again after having upgraded to Angular 11. – Genna

What should be used as YOUR_PROJECT_NAME_GOES_HERE ? I'm using my project directory name and getting Project 'my-project' could not be found in workspace. – Reidreidar

Refer to your package.json, it has a key named name. That should be used as your project name. – Guertin

I have updated my Angular version from 10 to 12. Also upgraded the eslint support without any error. If you guys are still facing any issue do let me know – Guertin

Answer 4

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

Misname

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

Atypical