{{ message }}
Repository navigation
Exception when using null coalescing operator in @for track expression #56256
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
When using the null coalescing operator ?? in the track expression using the new @for control flow syntax, an error is thrown during template rendering (and the contents of the for-loop aren't rendered).
Example (see reproduction URL):
@for (item of myList; track item.field1 ?? item.field2) {
<p>{{ $index }}: {{ item.field1 }}, {{ item.field2 }}</p>
}Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-for-template-bug?file=src%2Fmain.ts
Please provide the exception or error you saw
ERROR ReferenceError: tmp_7_0 is not defined
at _forTrack0 (main.ts:3:8)
at createOrAttach (chunk-ZNRRMEEJ.js?v=a3f8c8d7:17941:71)
at reconcile (chunk-ZNRRMEEJ.js?v=a3f8c8d7:17865:7)
at Module.ɵɵrepeater (chunk-ZNRRMEEJ.js?v=a3f8c8d7:18181:5)
at TodosComponent_Template (main.ts:11:5)
at executeTemplate (chunk-ZNRRMEEJ.js?v=a3f8c8d7:10767:5)
at refreshView (chunk-ZNRRMEEJ.js?v=a3f8c8d7:11789:7)
at detectChangesInView (chunk-ZNRRMEEJ.js?v=a3f8c8d7:11955:5)
at detectChangesInViewIfAttached (chunk-ZNRRMEEJ.js?v=a3f8c8d7:11938:3)
at detectChangesInComponent (chunk-ZNRRMEEJ.js?v=a3f8c8d7:11932:3)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@schematics/angular 18.0.2
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else?
The error is similar to this previous issue, also concerning the use of the null coalescing operator in template expressions: #53295
The compiler turns the @for track expression into this statement, which throws an error because tmp_7_0 is never defined:
var _forTrack0 = ($index, $item) => (tmp_7_0 = $item.field1) !== null && tmp_7_0 !== void 0 ? tmp_7_0 : $item.field2;
Activity
alxhub commentedon Jun 4, 2024
Looks like it could be a template pipeline bug.
crisbeto commentedon Jun 6, 2024
I looked into this a bit. I managed to get nullish coalescing to work by moving the
generateTrackFnsphase to beforegenerateNullishCoalesceExpressions, but while testing it I found that multi-level safe reads don't work either (e.g.track item?.name[0]?.toUpperCase()?.[0]). I tried moving it even earlier to beforeexpandSafeReads, but that resulted in some errors.fix(compiler): handle tracking expressions requiring temporary variables
fix(compiler): handle tracking expressions requiring temporary variab…
fix(compiler): handle tracking expressions requiring temporary variab…
angular-automatic-lock-bot commentedon Mar 15, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.