Angular’s NG8107 warning means a template uses optional chaining (?.) on a value whose declared type excludes both null and undefined. Check whether the value can really be missing: include the appropriate nullish type and keep ?. if it can, or remove ?. if it cannot.
What NG8107 means
Optional chaining avoids accessing a property when the value to its left is null or undefined. NG8107 appears when Angular’s template type checker says that value cannot be either. In that case, ?. does not protect against a nullish value according to the declared type, and the template may imply a case the type says is impossible. Angular’s guidance is to keep the template and declared type in sync.
As an Amazon Associate I earn from qualifying purchases.
The warning concerns the type Angular sees, not proof that a runtime value can never be missing. Before editing, check where the value comes from, how it is initialized, and whether its lifecycle or data source can leave it nullish.
Choose the fix that matches the value
There are two valid corrections. Use the one that reflects the actual data contract.
#1 Best Overall
If the value can be null or undefined
Declare the nullish possibility in the type and retain optional chaining. This example allows user to be either an object or null:
user: { name: string } | null = { name: 'Angelino' };{{ user?.name }}If the value may instead be undefined, include that possibility in its type. The important point is that the declaration should describe the cases the application can actually produce.
If the value is guaranteed to exist
Remove the unnecessary optional chain and access the property directly:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalluser: { name: string } = { name: 'Angelino' };{{ user.name }}Do not make a type nullable just to silence the warning if the value is in fact guaranteed to exist. Conversely, removing ?. is not appropriate if a nullish value can reach the template.
Rank #3
Why the warning appears
Angular extended diagnostics require strictTemplates. NG8107 also requires TypeScript strictNullChecks; without that setting, TypeScript does not enforce null and undefined checks in the same way. Angular lists NG8107 as optionalChainNotNullable among its extended diagnostics, whose default category is warning.
When the reported type seems surprising, inspect the expression’s inferred type and the declarations supplied by libraries or pipes. Angular’s template type-checking guide describes how strict template checking follows TypeScript’s null-check behavior and notes that library typings and asynchronous values can affect what the checker infers.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to suppress NG8107
Suppression is available as a project-level escape hatch, but it hides the diagnostic rather than correcting a mismatch. Angular documents this setting under angularCompilerOptions:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"optionalChainNotNullable": "suppress"
}
}
}
}Use it only when there is a deliberate reason to silence this check. First verify that the template and declared type accurately describe the value.
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.
