angular-eslint: Type-check rules cause errors when using `ng lint`

For the ones that are redirected by Google to this issue due to the error about the html file:

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

With the latest version at the time of writing (0.2.0-beta.1), this problem dissapears with the following data structure:

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "eslintConfig": ".eslintrc.json",
    "fix": true,
    "cache": true,
    "lintFilePatterns": ["src/**/*.ts"]
  }
}

The lintFilePatterns property is key here, just pass a glob with only the .ts files.

I have uploaded a repository with my favorite eslint configuration for Angular if you want to take a look: https://github.com/gagle/angular-starter

@JamesHenry, it comes with the territory when beta testing.

Thanks for all your hard work.

@guilhermetod – Thanks for that suggestion. I’d been experiencing the exact same problem in my project and your fix worked for me. I wound up tweaking it a bit, to be more explicit about which filetypes were extending which configs:

module.exports = {
  root: true,
  plugins: [
    "@typescript-eslint",
    "@angular-eslint"
  ],
  overrides: [
    {
      files: ["*.ts"],
      extends: [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:@angular-eslint/recommended",
      ],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        ecmaVersion: 2020,
        project: [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        sourceType: "module",
      },
      rules: {
        // Additional rules for *.ts files
      }
    },
    {
      files: ["*.component.html"],
      extends: ["plugin:@angular-eslint/recommended"],
      rules: {
        // Additional rules for *.component.html files
      }
    }
  ]
};

@gagle, @alechemy’s solution works for linting both TypeScript and HTML files. The only thing that will need to change with 0.2.0-beta.1 is the parsersOptions.project property.

OLD:

project: [
  "tsconfig.app.json",
  "tsconfig.spec.json",
  "e2e/tsconfig.json"
],

NEW:

project: [
  "tsconfig.eslint.json",
],

@delasteve After spending many hours yesterday working on typescript-eslint configuration issues, I learned several things that I think will solve you issues:

1. Since you are using rules that require type information, and because the parserOptions.project property does NOT inherit the base tsconfig.json from the extends option inside your tsconfig.app.json, then you need to specify your tsconfig.json in addition to tsconfig.app.json inside your parserOptions.project array. See here for more info - it explains this. Therefore, change this:

  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    project: "tsconfig.app.json",
    sourceType: "module",
  },

to

  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    project: ["tsconfig.json", "tsconfig.app.json"] // this should be an array which includes all required tsconfig.json files
    sourceType: "module",
  },

Your second issue regarding the error The file does not match your project config: src\app\app.component.html. The extension for the file (.html) is non-standard. You should add "parserOptions.extraFileExtensions" to your config - that is due to a tsconfig.json configuration issue. You did not post it here, but I assume you did not include the include option to specifically include only *.ts files. Here is an example of my working tsconfig.json file

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "importHelpers": true,
        "outDir": "./dist/compiled",
        "sourceMap": true,
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
        ],
        "lib": [
            "es2018",
            "es2015",
            "es2016",
            "dom",
            "es5",
            "es6"
        ]
    },
    "include": [
        "**/*.d.ts",
        "**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

As you can see, you need to include the type of files typescript should be checking, otherwise I believe it defaults to all files in the baseUrl which would cause your issue regarding the error about app.component.html. TypeScript should not be reading files with .html or .css extensions, etc.

Let me know if any of this works for you.