How to manually update Angular to use eslint and remove tslint

Question

I had previously tried to convert from tslint to eslint, but I never got past the ng add @angular-eslint/schematics

As I was on an old Angular version (8), and I thought I would wait until I updated, and I am now just updated to the latest (14)

Now I Have updated, I am still unable to run the above. I get..

        $ ng add @angular-eslint/schematics
    Skipping installation: Package already 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 (7380 bytes)
    ⠏ Installing packages (npm)...npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: myApp@undefined
    npm WARN Found: eslint@7.32.0
    npm WARN node_modules/eslint
    npm WARN   dev eslint@"^8.17.0" from the root project
    npm WARN   15 more (@angular-eslint/builder, ...)
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0" from eslint-plugin-import@2.22.1
    npm WARN node_modules/eslint-plugin-import
    npm WARN   dev eslint-plugin-import@"2.22.1" from the root project
    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: myApp@undefined
    npm WARN Found: eslint@7.32.0
    npm WARN node_modules/eslint
    npm WARN   dev eslint@"^8.17.0" from the root project
    npm WARN   15 more (@angular-eslint/builder, ...)
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peer eslint@"^6.0.0 || ^7.0.0" from eslint-plugin-jsdoc@30.7.6
    npm WARN node_modules/eslint-plugin-jsdoc
    npm WARN   dev eslint-plugin-jsdoc@"30.7.6" from the root project
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE could not resolve
    npm ERR!
    npm ERR! While resolving: @ngrx/effects@13.2.0
    npm ERR! Found: @angular/core@14.0.2
    npm ERR! node_modules/@angular/core
    npm ERR!   @angular/core@"^14.0.2" from the root project
    npm ERR!   peer @angular/core@"14.0.2" from @angular/animations@14.0.2
    npm ERR!   node_modules/@angular/animations
    npm ERR!     @angular/animations@"^14.0.2" from the root project
    npm ERR!     peerOptional @angular/animations@"14.0.2" from @angular/platform-browser@14.0.2
    npm ERR!     node_modules/@angular/platform-browser
    npm ERR!       @angular/platform-browser@"^14.0.2" from the root project
    npm ERR!       3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
    npm ERR!   12 more (@angular/common, @angular/compiler, @angular/forms, ...)
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer @angular/core@"^13.0.0" from @ngrx/effects@13.2.0
    npm ERR! node_modules/@ngrx/effects
    npm ERR!   @ngrx/effects@"^13.2.0" from the root project
    npm ERR!
    npm ERR! Conflicting peer dependency: @angular/core@13.3.11
    npm ERR! node_modules/@angular/core
    npm ERR!   peer @angular/core@"^13.0.0" from @ngrx/effects@13.2.0
    npm ERR!   node_modules/@ngrx/effects
    npm ERR!     @ngrx/effects@"^13.2.0" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR!
    npm ERR! See C:\Users\peter\AppData\Local\npm-cache\eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\peter\AppData\Local\npm-cache\_logs\2022-06-20T09_30_09_455Z-debug-0.log
    ✖ Package install failed, see above.
    The Schematic workflow failed. See above.

and in the source, if I create an error, I still see it is tslint picking it up

My Angular devdependencies are

"devDependencies": {
"@angular-devkit/architect": "^0.1400.2",
"@angular-devkit/build-angular": "^14.0.2",
"@angular-devkit/core": "^14.0.2",
"@angular-devkit/schematics": "^14.0.2",
"@angular-eslint/builder": "14.0.0-alpha.3",
"@angular-eslint/eslint-plugin": "14.0.0-alpha.3",
"@angular-eslint/eslint-plugin-template": "14.0.0-alpha.3",
"@angular-eslint/schematics": "14.0.0-alpha.3",
"@angular-eslint/template-parser": "14.0.0-alpha.3",
"@angular/cli": "^14.0.2",
"@angular/compiler": "^14.0.2",
"@angular/compiler-cli": "^14.0.2",
"@angular/language-service": "^14.0.2",
"@ionic/angular-toolkit": "^2.0.0",

So, I have broken something, and would like to know how I can fix this, and update

Answer 1

The error you get while installing your dependencies, after running the ng add command, is from @ngrx/effects . This package requires angular 13, but you have angular 14 installed. It seams that @ngrx/effects does not support angular 14 yet, check this version 14.0.0-rc.0 .

Also check your vscode plugins, make sure to disable tslint and install/enable eslint . I also asume you converted your lint config.

If you have both plugin installed it will throw weird errors from time to time