angular: CLI: 8.3.0 + iVY = ERROR in Error: Cannot assign to a reference or variable!

🐞 Bug report

- [ ] new
- [ X ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

I updated my CLI and enabled IVY, but when I’m building the error mentioned below. I checked several things I found on the internet, example of the links below:

https://stackoverflow.com/questions/48021581/error-cannot-assign-to-a-reference-or-variable-angular-4

https://github.com/TrilonIO/aspnetcore-angular-universal/issues/293

And the problem, which is not pointing the location of the error, if there is error. Because it started this only after updating the cli and activating ivy

🔥 Exception or Error

ERROR in Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:8412:31)
    at PropertyWrite.visit (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:7256:28)
    at convertActionBinding (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:8021:49)
    at prepareEventListenerParameters (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16230:27)
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:17314:24
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:17095:71
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16405:87
    at Array.map (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16405:60)
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16963:60
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16383:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (/var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16383:37)
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16963:60
    at /var/www/html/pwa-vimbo/node_modules/@angular/compiler/bundles/compiler.umd.js:16383:81
    at Array.forEach (<anonymous>)

🌍 Your Environment

Angular CLI: 8.3.0
Node: 10.15.3
OS: linux x64
Angular: 9.0.0-next.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.0
@angular-devkit/build-angular      0.803.0
@angular-devkit/build-optimizer    0.803.0
@angular-devkit/build-webpack      0.803.0
@angular-devkit/core               8.3.0
@angular-devkit/schematics         8.3.0
@angular/cdk                       8.1.3
@angular/cli                       8.3.0
@angular/flex-layout               8.0.0-beta.26
@angular/material                  8.1.3
@angular/material-moment-adapter   8.1.3
@ngtools/webpack                   8.3.0
@schematics/angular                8.3.0
@schematics/update                 0.803.0
rxjs                               6.5.2
typescript                         3.5.3
webpack                            4.39.2

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 22 (8 by maintainers)

Most upvoted comments

We really need a better error case in this situation.

alxhub on Oct 8, 2019

The error has been changed into an error diagnostic that shows exactly where the invalid write occurs in #34339. As such, I’m closing this issue as resolved.

JoostK on Dec 16, 2019

For anyone who couldn’t get the console.log(ast.name) in the compiler.umd.js file to work like me. You can just change line 8406 where it throws the error from throw new Error('Cannot assign to a reference or variable!'); to throw new Error('Cannot assign to a reference or variable! ' + ast.name);. Then your reference will be easy to find in the error name. My error came from something like this.

<div *ngFor="let item of items">
	<mat-form-field>
		<input matInput [(ngModel)]="item">
	</mat-form-field>
</div>

Changing to html to this fixed it…

<div *ngFor="let item of items; let i = index">
	<mat-form-field>
		<input matInput [(ngModel)]="items[i]">
	</mat-form-field>
</div>

ShinyGeodavid on Nov 1, 2019

@cmajsmith I have open ./node_modules/@angular/compiler/bundles/compiler.umd.js and add console.log(ast.name); on line 8405 (method _AstToIrVisitor.prototype.visitPropertyWrite just before throw new Error('Cannot assign to a reference or variable!');)

hmica on Sep 23, 2019

I found the problem and the fault of the junior frontend, but all error reports with this message, none of them addressed the error I found. I was discovered, why I put a console.log(ast.name) and found the name of the variable that was giving problem.

Now my question, why not the error message, since when I put console.log I discovered and went straight to the point of error

Captura de Tela_selecionar área_20190909140807

GlauberF on Nov 8, 2019

@alxhub, can we print a better error message?

alan-agius4 on Sep 5, 2019