(compile) Parenthesized assignment in two-way ngModel binding causes out of memory error #47131
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
Having a parenthesized assignment to an array member inside a two-way ngModel binding will not report a compile-time error, but produce a "JavaScript heap out of memory" error during ng build and ng serve. Removing the parentheses will still not cause a compile-time error and will work as expected at runtime.
Having an assignment in a two-way binding is wrong. But, I have an enterprise app (big ball of mud), whose build started failing after prettier reformatted the codebase. There was no compiler error, nor warning, just the error below. I traced it to a few lines in a template file, where prettier added parentheses.
The app is on Angular 12.2.16, but the issue is reproducible with my example on 14.0.7 as well. When ran on StackBlitz, it would crash the browser tab with an 'out of memory' error.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-wgogh2?file=src/app/app.component.ts
Please provide the exception or error you saw
npm run build
> angular@0.0.0 build
> ng build
⠙ Generating browser application bundles (phase: setup)...
<--- Last few GCs --->
[10796:0000028484D20760] 37916 ms: Scavenge 4043.0 (4128.1) -> 4042.4 (4128.6) MB, 47.4 / 0.0 ms (average mu = 0.265, current mu = 0.198) allocation failure
[10796:0000028484D20760] 41620 ms: Mark-sweep 4044.0 (4128.6) -> 4042.2 (4128.6) MB, 3699.2 / 0.1 ms (average mu = 0.165, current mu = 0.063) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF6E2AD815F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+114079
2: 00007FF6E2A654C6 DSA_meth_get_flags+65542
3: 00007FF6E2A6637D node::OnFatalError+301
4: 00007FF6E339BA0E v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF6E3385FED v8::SharedArrayBuffer::Externalize+781
6: 00007FF6E32293BC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
7: 00007FF6E3236069 v8::internal::Heap::PublishPendingAllocations+1129
8: 00007FF6E323303A v8::internal::Heap::PageFlagsAreConsistent+2842
9: 00007FF6E3225C99 v8::internal::Heap::CollectGarbage+2137
10: 00007FF6E3223E50 v8::internal::Heap::AllocateExternalBackingStore+2000
11: 00007FF6E32489D6 v8::internal::Factory::NewFillerObject+214
12: 00007FF6E2F7AEA5 v8::internal::DateCache::Weekday+1797
13: 00007FF6E3429701 v8::internal::SetupIsolateDelegate::SetupHeap+494417
14: 00007FF6E342A609 v8::internal::SetupIsolateDelegate::SetupHeap+498265
15: 000002848778AA48
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.0.7
Node: 16.14.2
Package Manager: npm 8.15.1
OS: win32 x64
Angular: 14.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.2
@angular-devkit/build-angular 14.1.2
@angular-devkit/core 14.1.2
@angular-devkit/schematics 14.0.7
@angular/cli 14.0.7
@schematics/angular 14.0.7
rxjs 7.5.6
typescript 4.7.4
Anything else?
Providing repro snippet in case StackBlitz link expires:
@Component({
selector: 'my-app',
template: '<input type="checkbox" [(ngModel)]="(x[0] = y)" />',
})
export class AppComponent {
x = [];
y = 1;
}The following code will compile and run fine:
<input type="checkbox" [(ngModel)]="x[0] = y" />