如何从命令行检查 Angular *.html 文件？

Question

I would like to lint html angular template files via the command line, similar to:

ng lint

I would like to validate the Angular html templates to check they are valid and the variables are correct, so I can run this in a CI pipeline like Travis or AWS Codebuild.

Visual studio code runs Angular Language Services and can do this:

What I want is to capture these errors, so that I don't let invalid Angular html templates get into releases.

How can I achieve this?

Answer 1

What you are seeing here is in fact a Typescript error, not a lint error.

There is an option fullTemplateTypeCheck that allows you to capture such errors during build when AOT is activated:

This option tells the compiler to enable the binding expression validation phase of the template compiler which uses TypeScript to validate binding expressions.

This option is false by default.

Note: It is recommended to set this to true because this option will default to true in the future.

This can in fact slow down your build considerably, so what you can do if you only want to use this in the CI pipeline:

Create a new tsconfig.strict.json next to your tsconfig.app.json like this:

{
  "extends": "./tsconfig.app.json",
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

In angular.json add a new configuration "strictProd" under projects>YourProject>architect>build>configurations that looks like this:

"strictProd": {
   "tsConfig": "src/tsconfig.app.strict.json",
   "aot": true
   [...your other prod settings here],
}

Run it with ng build -c strictProd

Answer 2

The best thing I have found is the html hint node package. You can read about it here: https://htmlhint.com/docs/user-guide/getting-started

Here is settings for the .htmlhintrc that work with Angular.

{ "tagname-lowercase": true, "attr-lowercase": false, "attr-value-double-quotes": true, "attr-value-not-empty": false, "attr-no-duplication": true, "doctype-first": false, "tag-pair": true, "tag-self-close": true, "empty-tag-not-self-closed": true, "spec-char-escape": false, "id-unique": false, "src-not-empty": true, "title-require": true, "alt-require": true, "doctype-html5": true, "id-class-value": "true", "style-disabled": true, "inline-style-disabled": true, "inline-script-disabled": true, "space-tab-mixed-disabled": "true", "id-class-ad-disabled": true, "href-abs-or-rel": false, "attr-unsafe-chars": true, "head-script-disabled": true }

Answer 3

尝试运行“ npm run lint -- --fix ”这将自动解决项目中的所有lint错误