How add @angular-eslint/schematics? Error

Question

I want to add @angular-eslint/schematics to a project. But I can't do it. Neither in the admin panel, nor in the user. I tried:

• ng add @angular-eslint/schematics

• npm install --save-dev eslint

• npm i -D @angular-eslint/template-parser

• ng add @angular-eslint/schematics@latest

• ng add @angular-eslint/schematics@next

• ng add @angular-eslint/schematics --legacy-peer-deps

• ng add @angular-eslint/schematics --force

• Delete node_modules package-lock chache and reinstall

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/animations": "^14.0.5",
    "@angular/cdk": "^14.0.4",
    "@angular/common": "^14.0.5",
    "@angular/compiler": "^14.0.5",
    "@angular/core": "^14.0.5",
    "@angular/forms": "^14.0.5",
    "@angular/localize": "^14.0.5",
    "@angular/platform-browser": "^14.0.5",
    "@angular/platform-browser-dynamic": "^14.0.5",
    "@angular/router": "^14.0.5",
    "@fortawesome/angular-fontawesome": "~0.11.1",
    "@fortawesome/fontawesome-svg-core": "~6.1.1",
    "@fortawesome/free-solid-svg-icons": "~6.1.1",
    "@kolkov/ngx-gallery": "^2.0.1",
    "@larscom/ngx-translate-module-loader": "^3.0.6",
    "@ng-bootstrap/ng-bootstrap": "~12.1.2",
    "@ngx-translate/core": "~14.0.0",
    "@ngx-translate/http-loader": "~7.0.0",
    "autoprefixer": "10.4.7",
    "bootstrap": "~5.1.3",
    "chart.js": "^3.8.0",
    "chartjs-plugin-datalabels": "^2.0.0",
    "font-awesome": "~4.7.0",
    "hammerjs": "~2.0.8",
    "lodash": "~4.17.21",
    "ng-animate": "~2.0.1",
    "ng2-charts": "^3.1.0",
    "ng2-nouislider": "^1.8.3",
    "ngx-ellipsis": "^4.0.0",
    "ngx-infinite-scroll": "^13.0.2",
    "ngx-spinner": "~14.0.0",
    "ngx-teximate": "~0.3.0",
    "ngx-translate-multi-http-loader": "^8.0.2",
    "nouislider": "^15.6.0",
    "primeicons": "~5.0.0",
    "primeng": "^13.4.1",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.5",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "^14.0.5",
    "@angular/compiler-cli": "^14.0.5",
    "@types/googlemaps": "^3.39.13",
    "@types/jasmine": "~4.0.3",
    "@types/lodash": "~4.14.182",
    "@types/node": "~18.0.3",
    "@types/uuid": "~8.3.4",
    "eslint": "^8.19.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.4"
  }

"dependencies": {
    "@angular/animations": "^14.0.5",
    "@angular/cdk": "^14.0.4",
    "@angular/common": "^14.0.5",
    "@angular/compiler": "^14.0.5",
    "@angular/core": "^14.0.5",
    "@angular/forms": "^14.0.5",
    "@angular/platform-browser": "^14.0.5",
    "@angular/platform-browser-dynamic": "^14.0.5",
    "@angular/router": "^14.0.5",
    "@kolkov/ngx-gallery": "^2.0.1",
    "@ngx-pwa/local-storage": "^13.0.3",
    "@types/lodash": "^4.14.182",
    "bootstrap": "^5.1.3",
    "eva-icons": "^1.1.3",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "ngx-moment": "^6.0.2",
    "ngx-pagination": "^6.0.2",
    "ngx-spinner": "^14.0.0",
    "ngx-toastr": "^15.0.0",
    "normalize.css": "^8.0.1",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.1",
    "quill": "^1.3.7",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.5",
    "@angular/cli": "^14.0.5",
    "@angular/compiler-cli": "^14.0.5",
    "@types/jasmine": "~4.0.3",
    "@types/node": "^18.0.3",
    "codelyzer": "6.0.2",
    "jasmine-core": "~4.2.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "^7.0.0",
    "ts-node": "~10.8.2",
    "tslint": "~6.1.0",
    "typescript": "~4.7.4"
  }

Answer 1

In my case helped npm i @angular-eslint/schematics --force before add @angular-eslint/schematics

But for some reason ADD does not always work, and before using it, you must first install the library.

Answer 2

You should resolve the conflicts before installing. Your base code already has conflicting dependencies. Try not to use --force parameter as it hides issues during the installation, and then the application may encounter weird bugs or not even be able to start.

As stated in the error log, in the first one @agm/core should be updated or removed. It says that your @agm/core version wants an angular dependency version between 9.1.0 and 11 (11 excluded), but you are using angular 14.

In the second one, @kolkov/ngx-gallery should be updated or removed. It says that your @kolkov version needs angular 13 when you are using angular 14.

Here is a good documentation about versioning to understand ranges including ~tilde and ^caret ranges to fix your issues: https://www.npmjs.com/package/semver

Note that it may display more issues once you fix one, as install stops at the first problem.

Also, you must not install the latest version of angular eslint. In fact, your app is using an old version of angular (14) and the latest is 16+. This is the same thing for @angular-eslint which is following angular versions. As stated in angular-eslint documentation, you must install angular-eslint version 14 as you are using angular version 14. Using @latest, you are trying to install version 16 which is not compatible. If you specify no version, it should be able to determine a version compatible with your existing dependencies (if your dependency tree is clean).

Supported Angular CLI Versions

As of v12, we aligned the major version of @angular-eslint with Angular (and Angular CLI).

Therefore, as an example (because these versions may or may not exist yet when you read this):

@angular-eslint packages at 12.x.x and @angular/[email protected] are compatible
@angular-eslint packages at 13.x.x and @angular/[email protected] are compatible
@angular-eslint packages at 14.x.x and @angular/[email protected] are compatible

So:

• delete your package.lock.json and your node_modules folder
• run: npm install This should already fail and print incompatible version errors to fix
• fix each issue and rerun npm install
• do the previous step until your dependencies are clean
• run ng add @angular-eslint/schematics or npm i @angular-eslint/schematics --save-dev which should now be successful

Also, note that you are using "@agm/core": "^3.0.0-beta.0" which is a prerelease version and shouldn't be used for production code