Angular’s NG8114 warning means a template expression combines ?? with || or && without parentheses to make the intended grouping clear. Add parentheses around the operation you intend to evaluate together; if you are unsure and want to preserve the expression’s existing behavior, Angular recommends grouping the ?? operation.
What does NG8114 mean?
NG8114 is an Angular extended diagnostic for a template expression that mixes nullish coalescing (??) with logical OR (||) or logical AND (&&) without explicit parentheses. Angular flags the expression because its grouping can be unclear to someone reading the code. The operators themselves are supported in Angular expressions; the diagnostic concerns their unparenthesized combination. Angular’s NG8114 documentation explains the check.
As an Amazon Associate I earn from qualifying purchases.
For example, Angular shows this grouped expression:
hasPermission() && (task()?.disabled ?? true)The parentheses show that the nullish-coalescing expression is evaluated as a unit within the logical AND expression.
#1 Best Overall
How do you fix NG8114?
Place parentheses around the part of the expression that reflects the logic you intend. Do not add them mechanically: the two possible groupings can represent different behavior, so inspect what should happen when the value is nullish and how the logical operator should affect the result.
When the original intent is unclear
If you cannot determine the original intent and want to keep the existing behavior, Angular recommends putting parentheses around the ?? operation. Treat this as a behavior-preserving starting point, then verify that the grouping matches the surrounding logic. See Angular’s guidance for NG8114.
Why does Angular flag this pattern?
In JavaScript and TypeScript, mixing ?? with || or && without parentheses is an error. Angular templates historically allowed the pattern, but its grouping can be difficult to interpret. NG8114 prompts you to make that grouping explicit. Angular’s template expression syntax guide documents the supported operators.
Recommended Free Tools
How do you configure or troubleshoot NG8114?
Extended diagnostics emit when strictTemplates is enabled. NG8114 is a warning by default and does not block compilation. Angular lists it as unparenthesizedNullishCoalescing in the extended diagnostics overview.
Rank #3
To change how Angular handles the check, use angularCompilerOptions.extendedDiagnostics in the compiler configuration. You can set an individual diagnostic category or the defaultCategory to warning, error, or suppress. If you expect NG8114 but do not see it, check that strictTemplates is enabled and review the project’s Angular compiler options. The documentation does not specify an introduction version for this diagnostic.
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.
