Angular Template Type Checking

Sébastien Dubois.
Jun 16 · 4 min read

In Angular 9, a neat new template type checking mode has been introduced, called strictTemplates. Let me tell your what it is and why you should enable it.

Image for post
Image for post
Picture courtesy of Agence Olloweb

In this article, we’ll look at an awesome new flag of Angular 9+, which you can enable and leverage to discover/fix issues before you ship code to production.

What is template type checking

When you write TypeScript code, you know that the compiler will yell at you whenever you screw up. Forgot to define a type? Forgot to provide a parameter? Forgot to return a value? Don’t worry, the compiler has got your back. It won’t find everything (because compilation is only part of the story), but it will help you uncover the obvious issues in your code.

Now, you might not all be aware of this, but Angular converts your templates into TypeScript code, whether those are separate HTML files or part of single file components.

Of course, if templates are transformed into TypeScript code, then these can be type-checked like the rest of the codebase. Isn’t that awesome?

Thanks to template type checking, we can discover issues with expressions embedded in our templates and avoid discovering those issues at runtime.

Template type checking modes

With Angular 9 , there are three different template type checking “modes” or “levels”:

  • Basic

As you can guess, the basic mode is not very strict, which you might see as positive: “hey, leave me alone”. This mode mostly works in the same way as the previous versions of Angular; it will only check top-level expressions in your templates (e.g., fields & properties that you use exist on the component class). Honestly, this level of type checking is really weak. The basic mode is enabled when the fullTemplateTypeCheckflag is set to false.

If you enable the “full” mode, then Angular will be more careful and it’ll also type check things like pipes and embedded views (created when you use things like ngIf, ngFor, ng-template, etc). Overall, this mode provides additional safety, but who likes half measures? To enable it, set the fullTemplateTypeCheckflag to true.

Finally, the new “strict” mode enforces full template type checking and catches many more errors at build time. In strict mode, the “full” mode checks are enabled and, in addition, many more things are checked:

  • component bindings and assignability (obeying TypeScript’s strictNullChecksflag)

Before Angular 9, we needed to enable/use the AOT mode to benefit from additional type checks. Now, it’s much simpler and much faster.

To enable the strict mode, you just have to set the strictTemplates flag to true.

Note that these flags are configured in your “tsconfig.json” file:

In addition, I really recommend you to enable the strict mode of TypeScript, but that’s a story for another day.

To be strict or not to be?

So which template type checking mode should you use?

Well if you read my blog or tweets regularly, you probably know the answer already: strict mode of course! In any case, the strict mode will most probably become the default as of Angular 10!

Indeed, depending on your project, you may need to increase the strictness step by step, resolving the unveiled issues as you go.

The thing is that, for a large project, it can take a while to fix the errors noticed by the type checker. This is the same story for TypeScript’s strict mode.

For new/young projects though, it’s really straightforward: enable the strictest mode for both Angular and TypeScript from the get go!

BTW, the Angular team has written a nice guide to help you troubleshoot template errors. As the guide indicates, instead of fully disabling strict type checking, you can disable specific strict checks so that you can remain “mostly” in strict mode, while still benefiting from the other strict checks. That is, until you are able to go back to the full-blown strict mode of course.

Check out the official docs for the full list of supported strict mode flags.

Benefits

To me, the benefits are quite obvious: the sooner you discover potential bugs, the happier your end users will be, no matter what.

Not only you deliver better quality software (which, as a software craftsman should make you feel good), but ultimately, you also spare time and avoid needless stress in production.

Time that you save thanks to better type checking can be used to deliver more business value, which is much more rewarding than having to wake up in the middle of the night to fix something that the compiler could’ve noticed.

Anything that can be caught at build time should be; anything that can’t should be caught by automated tests. The rest should be caught by code reviews. Enough said ;-)

Conclusion

In this article, I’ve quickly introduced the different template type checking modes supported by Angular 9, including the awesome new “strict” mode.

I’ve also tried to convince you to go ahead and enable the strict mode asap. If you’ve read thus far then please don’t disappoint me; go ahead and enable it right away. I’m curious to know how many bugs it catches for your codebase :D

That’s it for today!

Liked this article?

If you want to learn tons of other cool things about software/Web development, TypeScript, Angular, React, Vue, Kotlin, Java, Docker/Kubernetes and other cool subjects, then don’t hesitate to grab a copy of my book and to subscribe to my newsletter!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Sébastien Dubois.

Written by

Author, CTO. Subscribe to my newsletter: https://mailchi.mp/fb661753d54a/developassion-newsletter. Follow me on Twitter https://twitter.com/dsebastien

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Sébastien Dubois.

Written by

Author, CTO. Subscribe to my newsletter: https://mailchi.mp/fb661753d54a/developassion-newsletter. Follow me on Twitter https://twitter.com/dsebastien

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store