How to lint Angular *.html files from command line?

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