Updating the eslint configuration post upgrading from Angular 9 to 10: A step-by-step guide

Following the upgrade of Angular from 9 to 10 and running npm run lint, a peculiar issue arose > ng lint --fix

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(tsConfig).

The configuration in my angular.json is as follows:

    ..."lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "eslintConfig": ".eslintrc.js",
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": ["**/node_modules/**"]
      }
    },...

Here are the devDependencies listed in my package.json:

..."@angular-devkit/build-angular": "~0.1001.1",
"@angular-eslint/builder": "0.3.0-beta.1",
"@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
"@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
"@angular-eslint/template-parser": "0.0.1-alpha.32",
"@angular/cli": "~10.1.0",
"@angular/compiler-cli": "~10.1.1",
"@angular/language-service": "~10.1.1",
"@types/file-saver": "^2.0.1",
"@types/google-libphonenumber": "^7.4.19",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@typescript-eslint/eslint-plugin": "2.31.0",
"@typescript-eslint/parser": "2.31.0",
"codelyzer": "^5.2.2",
"eslint": "^7.6.0",
"eslint-config-airbnb-typescript": "^8.0.2",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-prettier": "^3.1.4",...

Upon changing 'tsConfig' to 'lintFilePatterns', an error was triggered by the CLI:

error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: tsconfig.app.json.
The extension for the file (.json) is non-standard. You should add "parserOptions.extraFileExtensions" to your config

What steps should be taken next?

angulartypescripteslinttslint

Answer №1

Encountering a similar issue with Angular 8, I discovered that the builder in angular-eslint does not support the tsConfig option: https://github.com/angular-eslint/angular-eslint/blob/master/packages/builder/src/schema.d.ts

To resolve this, I decided to eliminate tsConfig specifically for linting purposes and instead manually move the "include" files to "lintFilePatterns". In order to do this, I created a .eslintignore file at the root of my project where I listed any files I wanted to exclude (such as node_modules).

Here is a snippet from my angular.json:

  ..."lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "eslintConfig": ".eslintrc.js",
        "lintFilePatterns": [
          "**/*.spec.ts",
          "**/*.d.ts"
        ]
      }
    },...

Additionally, don't forget to create a .eslintignore file with the following content:

node_modules/*

Implementing these changes allowed me to successfully run ng lint.

Answer №2

To resolve the issue, you need to execute the following command:

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

While this command will handle multiple tasks, your error may be related to this specific step: https://i.sstatic.net/xFRuQ.png

For more information, refer to the documentation here: https://github.com/angular-eslint/angular-eslint

Answer №3

Stick to the information provided in this document 

https://github.com/angular-eslint/angular-eslint
. The issue here seems to be related to the version of Angular being used.

Currently, the angular-eslint only supports TypeScript versions up to 3.10, which means you should stick with Angular versions below 10.0.6 (since versions 10.1.x use TypeScript 4.0).

I believe waiting for compatibility updates is the best course of action at the moment. I will update once I am able to resolve this conflict. If you are facing the same challenge, consider downgrading your Angular to version 10.0.6. If you manage to find a solution, please share it here. :D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type `MockObject` as "{[key: string]: Information}|undefined" in Typescript

Hello, I've encountered this type mentioned in the title {[id: string]: Details}|null and the Details interface is defined as follows: export interface Details { id: number; name: string; info: string; } I'm wondering how I can mock this. ...

typescriptmocking

Potential issue with Angular material autocomplete not displaying suggestions when using input.setValue()

After clicking on the input element, the autocomplete options are displayed. However, if I dynamically modify the input element's value, the autocomplete options do not appear. <mat-form-field> <input type="text" [formControl]="d ...

angularangular-materialangular-formsmat-autocomplete

Continuously summon commitments

After extensive searching online, I am still grappling with this particular issue. Currently, I'm developing an Angular service for an Ionic application. This service's primary function is to download an image. In traditional JavaScript, I would ...

javascripttypescriptrecursionionic-frameworkes6-promise

Is there a way to execute the run function of a different Component in Angular 7 without causing the current

Is there a way to execute the ngOnInit() function from one component inside another component without needing to refresh the existing page? ...

angulartypescriptangular7

Using the useStaticQuery hook outside of a function component is not allowed and will result in an invalid hook call error. Remember to only call

I am currently facing an issue while trying to retrieve values using useStaticQuery from my gatsby-config.js file. Below are snippets of my code. Does anyone have any suggestions on how to resolve this problem? Thank you in advance. Repository: https: ...

typescriptgraphqlgatsby

A tutorial on ensuring Angular loads data prior to attempting to load a module

Just starting my Angular journey... Here's some code snippet: ngOnInit(): void { this.getProduct(); } getProduct(): void { const id = +this.route.snapshot.paramMap.get('id'); this.product = this.products.getProduct(id); ...

angulartypescript

Dynamically setting the IMG SRC attribute with the base64 result of a FileReader for file input

Looking for a little guidance on something new, I'll keep it brief because I'm sure it's just some small detail I'm overlooking... Starting with an image like this, where currentImage is the initial existing image path; <img src="{ ...

htmlangulartypescriptfilereader

Having trouble mocking useAppSelector in Jest, RTL, Redux Toolkit, and React testing

I have react redux toolkit installed and have replaced vitest with jest for testing purposes. My goal is to test whether the modal window is rendered in the App component when the isOpen flag is true. I only mock the part of the store that is necessary, n ...

reactjstypescriptjestjsreact-testing-libraryredux-toolkit

Exploring the use of file loaders with TypeScript

Currently, I have configured a file loader for .png files using esbuild. Additionally, I have the following in my index.d.ts: declare module "*.png" { const value: string; export default value; } One issue I am facing is that my code editor ...

typescriptesbuild

Storing multiple fields using LocalStorage in Angular2

After finding inspiration from the example at https://github.com/PillowPillow/ng2-webstorage, I successfully managed to store and retrieve the boundValue. Now, I encounter a new challenge with a list of bots: bot.component.html <tr *ngFor="let bot of ...

angularlocal-storageweb-storage

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

An issue has occurred where all parameters for the DataService in the D:/appangular/src/app/services/data.service.ts file cannot be resolved: (?, [object Object])

Upon running the command ng build --prod, an error is encountered. Error in data.service.ts: import { BadInput } from './../common/bad-input'; import { AppError } from './../common/app-error'; import { Injectable } from '@angular ...

angulartypescript

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Exploring angular for the first time and dabbling with the trello API. I have an array containing some list IDs that I need to make HTTP GET calls for, equal to the length of the array. For instance, if there are two IDs in the array, then the HTTP call sh ...

javascriptjqueryarraysangularfor-loop

Bidirectional data binding in Angular 2 for the class attribute

Utilizing twitter bootstrap tabs, I aim to monitor the application of the active class on the li tag as users switch between different tabs. My objective is to control tab activation through custom buttons by modifying the class attribute to activate direc ...

javascriptjqueryangularjstwitter-bootstrapangular

What is the proper way to input a Response object retrieved from a fetch request?

I am currently handling parallel requests for multiple fetches and I would like to define results as an array of response objects instead of just a general array of type any. However, I am uncertain about how to accomplish this. I attempted to research "ho ...

javascripttypescript

Enhancing user interaction in Angular by implementing a mouseover and mouseleave event listener on an element

I've been working on implementing a hover-over zoom functionality for my images. I created a custom function and tried to integrate it into the ngOnInit() {} method, but unfortunately, the functionality is not working as expected. @Component({ se ...

angularzooming

Why does the Change Detection problem persist even when using On Push with the same object reference?

After a recent discussion on Angular Change detection, I believed I had a solid understanding. However, my confidence wavered when I encountered this issue: Why is change detection not happening here when [value] changed? To further illustrate the problem ...

angular

Is there a way to ensure an ajax call finishes executing without relying on 'async: false' or callbacks?

In my view, I have implemented a TypeScript code defining a KnockoutJS binding handler for a clickable element as shown below: module MyModule { export interface ICopyButtonParams { dataUrl: string; } ko.bindingHandlers.copyButton = { ...

ajaxasynchronousknockout.jstypescriptclipboard.js

Neglecting the error message for type assignment in the Typescript compiler

Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...

javascripttypescripterror-handlingtsconfig

The 'npm update' command seems to be failing when attempting to update dependencies within Angular2

I am looking to upgrade the outdated dependencies in my Angular 2 project. Upon running npm outdated, I identified several dependencies that need updating. However, when I attempt to update them using the npm update command, it does not seem to work as exp ...

angularnpm