Catching Template Errors in Angular

Question

So in Angular applications if there is a situation like a misspelled function in your TS file - the TSLint plugin will catch it and and will print the error in your terminal console when you recompile your app.

However I have yet to find something that does something similar for HTML files in Angular. For example, misspelled or non-existent functions being called in the template that don't exist in the component. I have a lot of code changing everyday in my app, however I noticed sometimes we don't catch the HTML errors as quickly, particularly non-existent functions in the HTML. What would really help is if I saw HTML errors like these after every recompilation.

Does anyone know a proper solution to this that will tell you HTML errors after every recompilation?

I am running an Angular 6 App

Answer 1

Starting with Angular 9, you can enable strictTemplates in your tsconfig.json to catch all errors in the template at compile time.

See this blog post for more info: https://auth0.com/blog/angular-9s-best-hidden-feature-strict-template-checking/

Answer 2

Template parse errors are caught normally when the template is compiled. When you run ng serve, the default behavior is to load the just-in-time Angular compiler. This will compile the templates when they are loaded.

To figure out via static compilation, you need to use Ahead of Time Compilation. This can be invoked by adding --aot to the end of your command, e.g.

ng build --aot

You can further configure AOT to do in-depth type checking - see the documentation to learn more.

A production build will automatically do AOT compilation for you (i.e. ng build --prod).

Answer 3

You should Angular Language Service for that. There are multiple plugins/extensions for either Visual Studio Code, Atom or other editors. This will highlight errors in the templates while coding.

When it comes to the actual builds the compiler and development server should take care of notifying you of errors.