Where to set angular strictness flags that configure how strict strictTemplates is?

Question

I am currently converting our application to strictTemplates, and we are comming up with a huge amount of errors, some of them are more relevant than others.

So i wanted to configure the strictness of the angular type checker, and found this strictness flags in the documentation.

https://angular.io/guide/template-typecheck#troubleshooting-template-errors

Here are some examples from the docs

strictInputTypes Whether the assignability of a binding expression to the @Input() field is checked. Also affects the inference of directive generic types.

strictInputAccessModifiers Whether access modifiers such as private/protected/readonly are honored when assigning a binding expression to an @Input(). If disabled, the access modifiers of the @Input are ignored; only the type is checked. This option is false by default, even with strictTemplates set to true.

strictNullInputTypes Whether strictNullChecks is honored when checking @Input() bindings (per strictInputTypes). Turning this off can be useful when using a library that was not built with strictNullChecks in mind.

[...]

The only question I could not answer was where to set them... So in which file should this flags configured, and how?

I searched the internet for a solution but did only find a huge swath of articles on how to enable --strict and what the benefits are.

Answer 1

As shown in the Angular docs, you have to set them in the tsconfig.json file, inside the angularCompilerOptions field.

Answer 2

Found the solution in this post: https://www.angular.love/en/2021/09/02/angular-compilation-restrictions-overview/

Just put these flags below the strictTemplates option:

in tsconfig.app.json

   ...
     "compilerOptions": {
       ...
       "strictNullChecks": true,
     },
     "angularCompilerOptions": {
       "strictTemplates": true,
       "strictInputTypes": true,
       "strictNullInputTypes": true
     }
    }