iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s NG8107 warning means a template uses ?. on a value whose declared type excludes both null and undefined. Check what the value can actually be at runtime: include a nullish type and keep optional chaining if it can be absent, or remove ? if it is guaranteed to exist.
What NG8107 means
Angular reports NG8107 when the left side of an optional chain in a template is typed as non-nullable. For example, user?.name implies that user might be nullish, while a declaration such as user: { name: string } says it cannot be. The operator therefore has no effect according to the type information and can make the template’s intended data contract unclear. Angular’s guidance is to keep the template and declared type in sync.
Choose the fix that matches the runtime value
There are two valid fixes. The right one depends on whether the value can really be null or undefined—not simply on how to silence the warning.
| What is true at runtime? | TypeScript declaration | Angular template |
|---|---|---|
| The value can be null | user: { name: string } | null = { name: 'Angelino' }; |
{{ user?.name }} |
| The value is guaranteed to exist | user: { name: string } = { name: 'Angelino' }; |
{{ user.name }} |
If the value can be absent
Make the declared type reflect that possibility, then retain the optional chain so the template handles the nullish case:
#1 Best Overall
user: { name: string } | null = { name: 'Angelino' };{{ user?.name }}Use | undefined instead, or as well, if that is what the actual value contract allows.
If the value is guaranteed to exist
Remove the optional-chain operator and access the property directly:
user: { name: string } = { name: 'Angelino' };{{ user.name }}Do not make a type nullable merely to preserve ?. when nullish values cannot occur. A type should describe the value, not work around a diagnostic.
Free tools Windows power users keep installed
One-click scans. No signup required.
Check the source of the value before editing its type
Trace where the expression comes from and when it becomes available. A field initialized in the component may have a different contract from a value supplied by a parent, returned by a library, or produced by an asynchronous operation. Include null or undefined only if the source or lifecycle allows it; otherwise remove the unnecessary chain.
Rank #3
If Angular’s inferred type seems surprising, inspect the expression’s inferred type and the declarations supplied by libraries or pipes. Angular’s template type-checking guide explains that strict template checking follows TypeScript’s strictNullChecks behavior and notes that library typings and asynchronous values can complicate nullability reasoning.
When Angular emits NG8107
Extended diagnostics require strictTemplates, and NG8107 also requires TypeScript’s strictNullChecks. If the warning does not appear, check these settings before concluding that Angular has verified the optional chain.
Angular lists the check under the configuration name optionalChainNotNullable. Its extended-diagnostics overview describes the configurable diagnostic categories and identifies warning as the default category.
Suppress the warning only as a deliberate exception
You can suppress this diagnostic through angularCompilerOptions.extendedDiagnostics.checks.optionalChainNotNullable in the project’s TypeScript configuration:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"optionalChainNotNullable": "suppress"
}
}
}
}Suppression hides the check; it does not correct a mismatch between the declared type and the template. First verify whether the value is actually nullable and choose the matching fix above.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
