Self-closing Angular <router-outlet /> tag breaks linting of HTML files #1296
Description
Description and reproduction of the issue
My eslint configuration
{
"root": true,
"ignorePatterns": ["!**/*"],
"plugins": ["@nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"@nrwl/nx/enforce-module-boundaries": [
"error",
{
"allowCircularSelfDependency": true,
"depConstraints": [
{
"sourceTag": "type:feature",
"onlyDependOnLibsWithTags": [
"type:feature",
"type:ui",
"type:data-access",
"type:utility"
]
},
{
"sourceTag": "type:ui",
"onlyDependOnLibsWithTags": ["type:ui", "type:utility"]
},
{
"sourceTag": "type:data-access",
"onlyDependOnLibsWithTags": ["type:data-access", "type:utility"]
},
{
"sourceTag": "type:utility",
"onlyDependOnLibsWithTags": ["type:utility"]
}
]
}
]
}
},
{
"files": ["*.ts"],
"extends": [
"eslint:recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:@nrwl/nx/angular",
"plugin:@nrwl/nx/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "ba",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "ba",
"style": "kebab-case"
}
],
"@angular-eslint/contextual-decorator": "error",
"@angular-eslint/no-conflicting-lifecycle": "error",
"@angular-eslint/no-lifecycle-call": "error",
"@angular-eslint/no-pipe-impure": "error",
"@angular-eslint/no-queries-metadata-property": "error",
"@angular-eslint/prefer-on-push-component-change-detection": "error",
"@angular-eslint/prefer-output-readonly": "error",
"@angular-eslint/relative-url-prefix": "error",
"@angular-eslint/use-component-selector": "error",
"@angular-eslint/use-injectable-provided-in": "error",
"@angular-eslint/use-lifecycle-interface": "error",
"@typescript-eslint/no-non-null-assertion": "off"
}
},
{
"files": ["*.html"],
"extends": [
"plugin:@angular-eslint/template/recommended",
"plugin:@nrwl/nx/angular-template",
"plugin:prettier/recommended"
],
"rules": {
"@angular-eslint/template/accessibility-alt-text": "error",
"@angular-eslint/template/accessibility-elements-content": "error",
"@angular-eslint/template/accessibility-label-for": "error",
"@angular-eslint/template/accessibility-table-scope": "error",
"@angular-eslint/template/accessibility-valid-aria": "error",
"@angular-eslint/template/conditional-complexity": "warn",
"@angular-eslint/template/cyclomatic-complexity": "warn",
"@angular-eslint/template/no-any": "error",
"@angular-eslint/template/no-autofocus": "error",
"@angular-eslint/template/no-distracting-elements": "error",
"@angular-eslint/template/no-negated-async": "error",
"@angular-eslint/template/no-positive-tabindex": "error"
}
}
]
}
My HTML template
<header>🛠️</header>
<main>
<router-outlet />
<form>
<label>asdf</label>
<button>yep</button>
</form>
</main>Actual behavior
No lint error is shown in the above template.
Expected behavior
Lint errors are shown:
Hints
After either removing <router-outlet /> or changing it to <router-outlet></router-outlet>, linting works just fine.
Versions
| package | version |
|---|---|
@angular-eslint/eslint-plugin-template |
15.0.0 |
@angular-eslint/template-parser |
15.0.0 |
@typescript-eslint/parser |
5.49.0 |
ESLint |
8.15.0 |
node |
18.13.0 |
# Please run `npx ng version` in your project and paste the full output here:
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 15.1.2
Node: 18.13.0
Package Manager: yarn 1.22.10
OS: win32 x64
Angular: 15.1.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1501.2
@angular-devkit/build-angular 15.1.2
@angular-devkit/core 15.1.2
@angular-devkit/schematics 15.1.2
@angular/cli 15.1.2
@schematics/angular 15.1.2
rxjs 7.5.7
typescript 4.9.4
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest supported version of the packages and checked my
ng versionoutput per the instructions given here.