angular-eslint

21.3.1 verified Sat Apr 25 auth: no javascript

Official ESLint integration for Angular projects, enabling linting of Angular templates and TypeScript files with ESLint. Current stable version is v21.3.1, released in March 2026. It follows Angular major releases closely, with v21 supporting Angular 21 and ESLint v8/v9/v10. Key differentiators: provides Angular-specific ESLint rules (e.g., component-selector, no-uncalled-signals), schematic-based migration from TSLint, tight integration with Angular CLI via builders and schematics, and support for flat config. Requires typescript-eslint as a peer dependency.

Common errors

error Cannot find module '@angular-eslint/eslint-plugin' ↓

cause Missing peer dependency or incorrect installation order.

fix

Run ng add @angular-eslint/schematics to install all required packages.

error Configuration for rule '@angular-eslint/component-selector' is invalid ↓

cause Rule options changed in v21; previously accepted wrong format.

fix

Update rule config to match new schema: { type: 'element', prefix: 'app', style: 'kebab-case' }.

error Failed to load ESLint config: 'angular-eslint' is not a valid configuration ↓

cause Using flat config syntax incorrectly or missing import.

fix

Ensure you import angular from 'angular-eslint' and use ...angular.configs.tsRecommended.

Warnings

breaking v21.0.0 requires Angular 21 and dropped support for Angular < 21. ↓

fix Upgrade to Angular 21 and use ng update @angular/core @angular/cli angular-eslint.

breaking v20.0.0 migrated from TSLint to ESLint; TSLint configs are no longer supported. ↓

fix Run ng update angular-eslint to automatically migrate to ESLint.

deprecated The @angular-eslint/schematics package has been deprecated in favor of ng add @angular-eslint/schematics (now integrated into CLI). ↓

fix Use ng add @angular-eslint/schematics instead of manually installing.

gotcha Flat config (eslint.config.js) is the default since v19; legacy .eslintrc is not supported in v21+. ↓

fix Convert .eslintrc to flat config using the built-in schematic or manually.

gotcha The angular-eslint package re-exports from sub-packages; importing directly from '@angular-eslint/eslint-plugin' may cause version conflicts. ↓

fix Always import from 'angular-eslint' for consistent version resolution.

deprecated The processor 'angular.processInlineTemplates' is deprecated; use 'angular.processInlineTemplate' instead. ↓

fix Replace processInlineTemplates with processInlineTemplate.

gotcha ESLint v10 support was added in v21.3.0; using ESLint v10 with older angular-eslint versions will fail. ↓

fix Upgrade to angular-eslint v21.3.0+ if using ESLint v10.

Install

npm install angular-eslint

yarn add angular-eslint

pnpm add angular-eslint

Imports

angular-eslint
wrong
```
const angular-eslint = require('angular-eslint')
```
correct
```
import angular-eslint from 'angular-eslint'
```
Default import for flat config; CJS require not supported in ESM-first packages.

processComponents

wrong

import { processComponents } from 'angular-eslint'

correct

import { processComponents } from '@angular-eslint/utils'

Utility functions are re-exported from @angular-eslint/utils, not the main package.

ESLint config from '@angular-eslint/eslint-plugin'
wrong
```
import { rules } from '@angular-eslint/eslint-plugin'
```
correct
```
import plugin from '@angular-eslint/eslint-plugin'
```
The plugin package exports a default ESLint plugin config object; named rules export exists but is less common.

Quickstart

Shows setup of angular-eslint with flat config including TypeScript and template rules.

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  }
}

// eslint.config.js (flat config)
import angular from 'angular-eslint';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    files: ['**/*.ts'],
    extends: [
      ...tseslint.configs.recommended,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        { type: 'attribute', prefix: 'app', style: 'camelCase' },
      ],
      '@angular-eslint/component-selector': [
        'error',
        { type: 'element', prefix: 'app', style: 'kebab-case' },
      ],
    },
  },
  {
    files: ['**/*.html'],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);