Cannot configure Eslint rule "@angular-eslint/template/elements-content" in default angular workspace

[Michaelvsk]

Hi,

I do have an issue with configuring the eslint rule @angular-eslint/template/elements-content and was able to reproduce it with the default angular workspace.
I have created the workspace via npx create-nx-workspace@latest with nx v21.5.1 and selected the angular template.

To one of the angular templates I have added this HTML code:

<button my-label="labelText"></button>

When running "npm run lint" I get this linting error:

> nx run nx20:lint

Linting "nx20"...

C:\nx20\apps\nx20\src\app\nx-welcome.ts
  459:11  error  <button> should have content  @angular-eslint/template/elements-content

So I configured that rule to ignore tags which come with a my-label attribute and added this config to apps/nx20/eslint.config.mjs:

import nx from '@nx/eslint-plugin';
import baseConfig from '../../eslint.config.mjs';

export default [
  ...baseConfig,
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': ... , // omitting details
      '@angular-eslint/component-selector': ... , // omitting details
      '@angular-eslint/template/elements-content': [
        'warn',
        {
          "allowList": [
            "my-label"
        ]
      }
      ],
    },
  },
  {
    files: ['**/*.html'],
    // Override or add rules here
    rules: {},
  },
];

Now linting fails to run and tells me that the configuration is incorrect. But according to official documentation it is configured correctly. So I suspect that the issue is related to how eslint/angular-eslint configuration is set up with nx.

Here is the full error message:

> nx run nx20:lint

Linting "nx20"...
 NX   Key "rules": Key "@angular-eslint/template/elements-content": Could not find plugin "@angular-eslint/template" in configuration.
TypeError: Key "rules": Key "@angular-eslint/template/elements-content": Could not find plugin "@angular-eslint/template" in configuration.
    at throwRuleNotFoundError (C:\nx20\node_modules\eslint\lib\config\config.js:100:16)
    at Config.validateRulesConfig (C:\nx20\node_modules\eslint\lib\config\config.js:603:5)
    at new Config (C:\nx20\node_modules\eslint\lib\config\config.js:484:9)
    at [finalizeConfig] (C:\nx20\node_modules\eslint\lib\config\flat-config-array.js:212:10)
    at FlatConfigArray.getConfigWithStatus (C:\nx20\node_modules\@eslint\config-array\dist\cjs\index.cjs:1404:55)
    at FlatConfigArray.getConfig (C:\nx20\node_modules\@eslint\config-array\dist\cjs\index.cjs:1422:15)
    at entryFilter (C:\nx20\node_modules\eslint\lib\eslint\eslint-helpers.js:322:27)
    at async NodeHfs.<anonymous> (file:///C:/projects/labs/nx20/nx20/node_modules/@humanfs/core/src/hfs.js:574:24)
    at async NodeHfs.walk (file:///C:/projects/labs/nx20/nx20/node_modules/@humanfs/core/src/hfs.js:614:3)
    at async globSearch (C:\nx20\node_modules\eslint\lib\eslint\eslint-helpers.js:363:20)

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

 NX   Ran target lint for project nx20 (7s)

   ×  1/1 failed
   √  0/1 succeeded [0 read from cache]

Can anyone assist, please?

[Michaelvsk]

Solved the issue. :) It's not a nx-specific problem at all. Some rules may only be applied to certain file types/extensions and won't be recognized otherwise.
Although the HTML template is embedded in a *.ts file, I have to apply the rule config to HTML files and then it is working as expected. So the following config is working, although the linted code is inside a *.ts file:

import nx from '@nx/eslint-plugin';
import baseConfig from '../../eslint.config.mjs';

export default [
  ...baseConfig,
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    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'],
    rules: {
      '@angular-eslint/template/elements-content': [
        'warn',
        {
          "allowList": [
            "my-label"
        ]
      }
      ],
    },
  },
];