Skip to content

Angular eslint template rules don't apply to inline templates inside blocks #1825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task done
rajsite opened this issue May 20, 2024 · 0 comments · Fixed by #2238
Closed
1 task done

Angular eslint template rules don't apply to inline templates inside blocks #1825

rajsite opened this issue May 20, 2024 · 0 comments · Fixed by #2238
Labels
package: template-parser ESLint custom parser which enables linting Angular Templates triage This issue needs to be looked at and categorized by a maintainer

Comments

@rajsite
Copy link

rajsite commented May 20, 2024

Description and reproduction of the issue

The angular-eslint/template rules seem to only detect inline components created at the top-level of a file. For example, if the following component is created with the recommended template rule set in the top of a spec file:

@Component({
  template: '<div  [attr.disabled]="test != 7"></div>'
})
class TemplateIssueOuterComponent {
  @Input()
  test = false;
}

You get the expected lint error:

Expected `!==` but received `!=

However if the Component is created inside a block level element such as a describe block:

describe('TemplateIssueComponent', () => {
  @Component({
    template: '<div  [attr.disabled]="test != 7"></div>'
  })
  class TemplateIssueInnerComponent {
    @Input()
    test = false;
  }
});

Then you do not get any eslint template errors.

Attached is a reproduction of the issue. See src\app\template-issue\template-issue.component.spec.ts

template-issue.zip

Additional Context: We would like to be able to enable the i18n attributes rule (@angular-eslint/template/i18n) for our test code. We have a component library with exhaustive attribute test coverage and would like to enable the i18n attributes rule in our test templates to make sure i18n attribute exceptions are well captured and categorized. All our inline test templates are inside describe blocks and do not seem to be detected by the angular eslint template parsing.

Versions

package version
@angular-eslint/template-parser 16.3.1
ESLint 8.57.0
node 20.10.0
Angular CLI: 16.2.14       
Node: 20.10.0 (Unsupported)
Package Manager: npm 10.5.2
OS: win32 x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.14
@angular-devkit/build-angular   16.2.14
@angular-devkit/core            16.2.14
@angular-devkit/schematics      16.2.14
@angular/cli                    16.2.14
@schematics/angular             16.2.14
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Warning: The current version of Node (20.10.0) is not supported by Angular.
  • I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.
    • Using Angular 16.X which is a currently supported version of Angular
@rajsite rajsite added package: template-parser ESLint custom parser which enables linting Angular Templates triage This issue needs to be looked at and categorized by a maintainer labels May 20, 2024
rajsite added a commit to ni/nimble that referenced this issue May 20, 2024
# Pull Request

## 🤨 Rationale

Enables the i18n attribute lint rule for the angular-workspace. The goal
is to have some level of automation in detecting attributes that should
not be marked i18n early to add to the javascript style guide angular
eslint configuration.

## 👩‍💻 Implementation

- Enabled the rule with a local list of exceptions.
- Found that even though the i18n attributes rule is enabled for all
files, it does not seem to run for our tests. Seems to be because our
inline templates in tests are not defined at the top-level of the file.
Created angular-eslint issue:
angular-eslint/angular-eslint#1825

## 🧪 Testing

Rely on CI.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed. Comments are in the eslint config,
didn't seem like additional were neecessary.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: template-parser ESLint custom parser which enables linting Angular Templates triage This issue needs to be looked at and categorized by a maintainer
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant