I would like to lint html angular template files via the mand 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?

I would like to lint html angular template files via the mand 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?

• javascript
• html
• angular

Share Improve this question Follow asked Mar 1, 2019 at 12:05 apollowebdesignsapollowebdesigns 76811 gold badge1313 silver badges3030 bronze badges 2

• Related: github./angular/angular-cli/issues/11287 – jonrsharpe Commented Mar 1, 2019 at 12:06
• If you run AOT mand it will tell you all the unused or wrong variable used in html itself – Sandip - Frontend Developer Commented Mar 1, 2019 at 12:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 piler to enable the binding expression validation phase of the template piler which uses TypeScript to validate binding expressions.

This option is false by default.

Note: It is remended 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

The best thing I have found is the html hint node package. You can read about it here: https://htmlhint./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
}