Angular 14 is throwing an error due to an indent issue - the expected indentation is 2 spaces but 4 spaces were found

Currently using

"eslint": "^8.23.0"
with angular 14.
Everything was functioning properly with
"eslint": "^8.22.0"
, but after updating to 8.23.0, I encountered the following error:

https://i.sstatic.net/UALvS.png

https://i.sstatic.net/itVQu.png

This is my eslint configuration:

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts",
        "*.js",
        "*.tsx"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        ... // additional rules omitted for brevity 
      }
    },
    {
      "files": [
        "*.html",
        "*.css"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        ... // additional rules omitted for brevity
      }
    }
  ]
}

The specific section causing trouble is the indent configuration:

"indent": [
 "error",
 2,
 {
  "SwitchCase": 1  
 }
]

I experimented with this alternate configuration:

"indent": [
 "error",
 2,
 {
   "SwitchCase": 1,
   "ArrayExpression": "first"
 }
]

I even modified the eslint config like so:

"indent": "off",
"@typescript-eslint/indent": [
  "error",
  2,
  {
    "SwitchCase": 1
  }
],

However, these changes did not resolve the issue!

Answer №1

The issue has been resolved after updating the mentioned packages:

@typescript-eslint/eslint-plugin  5.36.0  →  5.36.1
@typescript-eslint/parser         5.36.0  →  5.36.1

Answer №2

Resolved using the following dependencies (in an angular 16 project):

...
"@typescript-eslint/eslint-plugin": "^6.8.0",
"@typescript-eslint/eslint-plugin-tslint": "^6.8.0",
"@typescript-eslint/parser": "^6.8.0",
"eslint": "^8.52.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsdoc": "^46.8.2",
"eslint-plugin-prefer-arrow": "^1.2.3",
...

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

Exploring Angular 8 Route Paths

Working on an Angular 8 project, I encountered an issue with my code: src/app/helpers/auth.guard.ts import { AuthenticationService } from '@app/services'; The AuthenticationService ts file is located at: src/app/services/authentication.servic ...

Attempting to verify if a function is being invoked within a subscription, but finding that it never gets activated

I have a method that needs to be tested when called in an ngOnInit. Specifically, I want to ensure that when the ngOnInit is triggered, this.anotherService.methodToCall() is executed and verify what parameters it is called with. However, despite my effort ...

The async/await feature in Typescript fails to trigger updates in the AngularJS view

Currently, I am utilizing Typescript 2.1 (developer version) to transpile async/await to ES5. An issue I have encountered is that when I modify any property linked to the view within my async function, the view does not automatically reflect the updated v ...

Exciting ngClass variation

I am facing a challenge of adding multiple classes to an element, with one of them being conditional. After referencing the documentation, I came across this method: <some-element [ngClass]="{'first': true, 'second': true, 'thi ...

Angular2's counterpart to the angular.version property in AngularJS

If you open the browser's developer console (you can press F12), and type in "angular.version", it will display the version of AngularJS APP that is currently loaded on the page. Is there a similar command for finding out the version of Angular2? ...

Having trouble finding the module for declaration in ASP.NET Core with Angular?

Encountering issues while attempting to create new Angular components with the command ng g component login-form Error finding module for declaration. No module files located. It seems that the angular CLI is throwing errors due to the differing file ...

Using Angular, implementing conditional statements within a for loop

I am currently working on a project where I have an array being looped inside a tag, using the target="_blank" attribute. The issue is that one of the elements in the array should not have this target="_blank" attribute. What would be the best course of ...

Upgrading from Angular 2 to 4 causes compilation failure in project

Recently, I upgraded my Angular project from version 2 to version 4. The steps I followed for this upgrade are as follows: 1- Deleted the /node_modules/ folder 2- Executed the following command: npm install @angular/common@latest @angular/compiler@lat ...

Encountering problem with npm ERR! peer @angular/common@"^12.0.0" while trying to install @ng-bootstrap/[email protected]

Encountering an issue during the deployment of my Angular application. I added the @ng-bootstrap/ng-bootstrap package, but there seems to be a dependency resolution problem causing the issue. 22-Dec-2022 07:03:47 npm ERR! Could not resolve dependency: 2 ...

Execute an Angular 7 Single Page Application directly through the file:// protocol

I've been diving into tutorials on SPA and client-side routing, but I'm still struggling to grasp it fully. How can I configure the router to function without a web server? For example: file:///C:/cxr/CXR-WebViews/dist/CXR-WebViews/index.html#/p ...

The Angular template-driven form featuring Material inputs will automatically reset itself when initialized

I am currently working on a simple template-based form in my application, utilizing material form fields. I have opted for this approach instead of a reactive one. The desired functionality is to display the form only when the user clicks on a button. Up ...

When using Angular, sensitive login credentials are easily visible in the browser's address bar

In my Angular 9 application, I occasionally encounter a rare issue where my authentication data is exposed in the browser address bar. Instead of the expected URL like: http://localhost:8080/#/application/48 it somehow ends up looking like this: http://lo ...

Notifying locally in Ionic 3 every couple of hours

I have a concept for my app where users can choose to receive notifications every 3 hours. The challenge is setting up a toggle on the HTML that, when activated, prompts the user to input the first time they eat in a day. From there, the app will send remi ...

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?

Currently, I am developing a nodejs typescript API where I am retrieving an array of objects using a map loop. The data for "communes", "category", and "location" is fetched from another API function based on the issuerId. However, I am facing issues with ...

What is the syntax for declaring a function type with an optional parameter in Typescript?

I have a function with optional parameters that I am passing down to another component. execute = (option: string = 'default'): void => { // ... } In the receiving component, there is a property called executeFunction where I intend to assi ...

Why doesn't TypeScript automatically determine the prop type when Generics are used?

Below is the code snippet: interface MyInterface { a: { b: { c: "c"; }; }; } type ParentProps = keyof MyInterface type ChildProps<ParentProp extends ParentProps> = keyof MyInterface[ParentProp] type GrandChildType< ...

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...

The overlay pop-up does not reposition on scroll movements

Within the image, there is a MatDialog Box positioned on top of another dialog box. Inside the MatDialog Box, there is a Component called MyNewDetailComponent. This component is accessed via Overlay with the scrollOptions set to reposition(). The issue ar ...

Updating from webpack v1 to v2 using webpack-cli results in a tsx error during migration

Encountering an error during the build process after migration, I'm unsure if it's related to the recognition of tsx files or something within them that is causing issues: Failed to compile. Error in ./src/index_app.tsx Module parse fail ...

Enhancing the aesthetic appeal of Angular2 Google Maps

Hey there, I'm a newcomer to Angular2/Typescript and I've been working on styling a map in my Angular2 project. I integrated a map using the Angular2 Google Maps Components, but I'm having trouble with applying styles through the undocumente ...