ng build throw error - Cannot assign value "data" to template variable "permission". Template variables are read-only.

🐞 bug report

Yes, the previous Angular version 8 this error was not present.

Description

After I update my angular project from 8 to 9 and execute the build node --max-old-space-size=5196 node_modules/@angular/cli/bin/ng build mgmt-console --prod --aot --build-optimizer --vendor-chunk

I gut this error: Cannot assign value “data” to template variable “permission”. Template variables are read-only.

The problem is the error doesn’t tel me which template file has this issue. (Below I added the entire error log)

I search manually in all my project for this text >> ‘[permission]’ and readonly permission and even something like that ‘=“data”’ unfortunately I didn’t found any of those.

🔥 Exception or Error

ERROR in Error: Cannot assign value "data" to template variable "permission". Template variables are read-only.
    at _AstToIrVisitor.visitPropertyWrite (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:8626:31)
    at PropertyWrite.visit (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:7519:28)
    at convertActionBinding (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:8229:49)
    at prepareEventListenerParameters (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17117:27)
    at Object.params (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:18226:24)
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17999:94
    at Array.map (<anonymous>)
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17999:60
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17273:87
    at Array.map (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17273:60)
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17809:60
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17251:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (/Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17251:37)
    at /Users/ofirf/dev/management/mgmt-console/node_modules/@angular/compiler/bundles/compiler.umd.js:17809:60

🌍 Your Environment

Angular Version:

Anything else relevant?

Angular CLI: 9.1.0 Node: 12.3.1 OS: darwin x64

Angular: 9.1.0 … animations, cli, common, compiler, compiler-cli, core, forms … language-service, platform-browser, platform-browser-dynamic … platform-server, router, service-worker Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.0 @angular-devkit/build-angular 0.901.0 @angular-devkit/build-optimizer 0.901.0 @angular-devkit/build-webpack 0.901.0 @angular-devkit/core 9.1.0 @angular-devkit/schematics 9.1.0 @angular-devkit/schematics-cli 0.803.25 @angular/cdk 9.2.0 @angular/material 9.2.0 @ngtools/webpack 9.1.0 @nguniversal/express-engine 8.2.6 @schematics/angular 9.1.0 @schematics/schematics 0.803.25 @schematics/update 0.901.0 rxjs 6.5.4 typescript 3.8.3 webpack 4.42.0 please mention it below. -->

[JoeFirebaugh]

FWIW, I found that making this change in node_modules/@angular/compiler/bundles/compiler.umd.js at line 8923 gave me the filename I needed to fix it. I had quite a few due to my project having been written before AOT.

var filePath = this._localResolver.component.filePath;
throw new Error("Cannot assign value \"" + value + "\" to template variable \"" + receiver_1 + "\". Template variables are read-only. : " + filePath);

YMMV.

I did notice that same line of code is in several places within the compiler project, so you might have to fix it elsewhere too.

[JoostK]

@ofirrifo Please see https://github.com/angular/angular/issues/35139#issuecomment-581850479 for how this can be caught the nice way.

The error occurs in a part of the compiler where dealing with such errors is a bit problematic. The template type checker is able to catch this case and properly report a diagnostic, but if it’s disabled then you’ll end up with this error 😦