Error while linting: Cannot read properties of undefined (reading 'isStrict')

Question

I am setting up ESLint inside of an Angular project. Now when running the linter I get the following error:

Oops! Something went wrong! :(

ESLint: 8.56.0

TypeError: Cannot read properties of undefined (reading 'isStrict')
Occurred while linting C:\Users\MATM\Projekte\Test\src\app\app.component.ts\1_inline-template-app.component.ts-1.component.html:1
Rule: "no-eval"
    at Program (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\rules\no-eval.js:229:72)
    at ruleErrorHandler (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\linter.js:1076:28)
    at C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\node-event-generator.js:340:14)
    at CodePathAnalyzer.enterNode (C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\code-path-analysis\code-path-analyzer.js:803:23)
    at C:\Users\MATM\Projekte\Test\node_modules\eslint\lib\linter\linter.js:1111:32

I am not sure what causes this and where to even start looking. I've found some posts, that it may have something to do with the configuration, but I am very unsure what could go wrong there.

Here is the configuration I have used:

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 'latest',
  },
  env: {
    node: true,
    browser: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  overrides: [
    {
      files: ["**/*.ts"],
      extends: ["plugin:@typescript-eslint/recommended-type-checked"],
      plugins: ["@typescript-eslint"],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        project: ['./tsconfig.app.json'],
        tsconfigRootDir: __dirname,
      },
    },
    {
      files: ["**/*.component.ts"],
      extends: [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
      ],
      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: ["**/*.component.html"],
      extends: [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility",
      ],
      rules: {},
    },
  ],
};

Answer 1

It seems like the @angular-eslint/template plugin does not like the no-eval rule, thats why I simply deactivated it for HTML files. Also the @typescript-eslint/unbound-method rule (activated automatically by the recommended config) seemed to interfer with the Angular plugin.

module.exports = {
  overrides: [
    {
      files: ['*.html'],
      rules: {
        'no-eval': ['off'],
      },
    },
    {
      file: ['*.ts'],
      rules: {
        '@typescript-eslint/unbound-method': ['off'],
      }
    }
  ]
}