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 NG8114 warning means a template expression combines ?? with || or && without parentheses to make the grouping clear. Add parentheses around the operation you intend to evaluate first. If you cannot tell what the original code intended and need to preserve its behavior, Angular recommends grouping the ?? operation—but verify that matches the expression’s logic.
What NG8114 means
NG8114 is an Angular extended diagnostic for an unparenthesized mix of nullish coalescing (??) and logical OR (||) or logical AND (&&) in a template expression. The operators are supported in Angular expressions; the warning is about making their grouping explicit. Angular notes that this combination is an error in TypeScript and JavaScript, although Angular templates historically allowed it. Angular’s NG8114 documentation explains the check.
How to fix NG8114
Put parentheses around the part of the expression that should be evaluated as a unit. Choose the grouping based on the intended behavior rather than adding parentheses mechanically.
Preserve the nullish fallback grouping when intent is unclear
If you do not know what the original expression was meant to do and want to preserve its existing behavior, Angular recommends putting parentheses around the ?? operation. Its example is:
#1 Best Overall
hasPermission() && (task()?.disabled ?? true)Here, the nullish-coalescing expression is grouped as the right-hand side of the logical AND. The optional task’s disabled value is used when it is not null or undefined; otherwise, the fallback is true. If the surrounding logic was meant to group the logical operation differently, use parentheses to express that instead.
Check what the fallback and logical operator mean
Before editing, identify what value the ?? fallback should supply and how the result of the expression is used by || or &&. Those operators express different conditions, so the right grouping depends on the template’s logic. Angular’s general direction is to use parentheses to disambiguate these combinations. Angular’s template expression syntax guide documents the supported operators.
Why Angular reports the warning
Without parentheses, readers may not be able to tell which operation is meant to happen first. Explicit grouping documents the intended logic and avoids relying on an ambiguous-looking expression. The goal is not to remove ??, ||, or &&, but to make their relationship clear.
When NG8114 appears—or does not
NG8114 is an extended diagnostic. Angular emits extended diagnostics when strictTemplates is enabled. They are warnings by default and do not block compilation. The check is named unparenthesizedNullishCoalescing in the extended-diagnostics configuration. See Angular’s extended diagnostics overview for configuration details.
Rank #3
You can set the category for an individual diagnostic or for all extended diagnostics using angularCompilerOptions.extendedDiagnostics. The available categories are warning, error, and suppress. If you expect this warning but do not see it, check that strictTemplates is enabled and review the project’s compiler options. The cited Angular documentation does not specify the version in which NG8114 was introduced.
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.
