Error encountered during Angular production build: Attempting to assign value to a reference or variable not possible

Question

Error encountered during Angular production build: Attempting to assign value to a reference or variable not possible

Encountering issues building the production version of my Angular app.

The IDE console only displays this message:

ERROR in Cannot assign to a reference or variable!

To successfully build, I need to include these options:

--aot=false --buildOptimizer=false

However, even with these options, the app fails after deployment with this error message in the browser console:

ERROR TypeError: Cannot read property 'init' of undefined

This issue can be resolved by adding another option:

--optimization=false

When attempting to build using:

npm run ng build -- --prod

A log file provides some information:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Backend\\nodejs\\node.exe', ...

Despite updating everything, the problem persists. The output of ng version is as follows:

Angular CLI: 8.3.4
Node: 10.15.3
OS: win32 x64
Angular: 8.2.6
...

Having examined the source code available at the link provided, I am seeking guidance on how to identify and resolve this error.

Similar query posted on ru.stackoverflow:

SOLVED:

The root cause of the error has been identified (credit to SO user ): an attempt was made to alter the value of a variable defined within a template using a custom directive.

The lack of clear error messaging complicated troubleshooting, necessitating debugging via the compiler. For more details, refer to this discussion (in Russian):

UPDATE:

Issues and PRs have been submitted to the Angular repository for resolution:

No detailed error messages: issue, PR
Assignment of values to template variables causing prod build failure: issue, PR

angular typescript npm angular-cli

Answer 1

Answer №1

Dealing with exceptions from the AST parser can often be a frustrating experience. These exceptions tend to lack any useful information, providing only a generic error message:

ERROR in Cannot assign to a reference or variable!

Isn't that just lovely?

Take for instance the linker (ViewBuilder) which simply points out where it struggles to build template expressions.

Turning to Google may seem like a viable option. However, you'll likely end up being directed back to checking the usage of the ngModel directive in your template.

The alternative approach involves delving into the compiler itself and debugging the issue directly. Angular utilizes

node_modules/@angular/compiler/bundles/compiler.umd.js

during compilation.

If we open this file and search for the text

Cannot assign to a reference or variable!

, we will come across the _AstToIrVisitor class and the visitPropertyWrite method containing the following line of code:

// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');

An exception is thrown without shedding much light on the problem 🤨

To better understand the situation, we can insert a console.log(ast) before the exception, where ast represents the parameter of the visitPropertyWrite function. This would log an instance of the PropertyWrite class to the console:

PropertyWrite {
  span: ParseSpan { start: 0, end: 73 },
  receiver: ImplicitReceiver { span: ParseSpan { start: 0, end: 0 } },
  name: 'translation',
  value: MethodCall {
    span: ParseSpan { start: 14, end: 73 },
    receiver: ImplicitReceiver { span: [ParseSpan] },
    name: 'getTranslationForLanguageFromArticle',
    args: [ [PropertyRead], [PropertyRead] ]
  }
}

This process leads us to examine the connection between the translation property and the

getTranslationForLanguageFromArticle

method call. By analyzing your example from Bitbucket, I uncovered the usage of "getTranslationForLanguageFromArticle" within the feed.component.html:

(change)="translation = getTranslationForLanguageFromArticle($event.value, article)"

The parser struggles because translation isn't a class property but rather a local variable accessed implicitly within the *ngVar directive.

A possible solution could involve creating a method like changeTranslation within the component and manipulating the

article.translations[indexOfCorrectArticleTranslation(article)]

there.

At least now you have a clearer direction to follow :)

Answer 2

Dealing with exceptions from the AST parser can often be a frustrating experience. These exceptions tend to lack any useful information, providing only a generic error message:

ERROR in Cannot assign to a reference or variable!

Isn't that just lovely?

Take for instance the linker (ViewBuilder) which simply points out where it struggles to build template expressions.

Turning to Google may seem like a viable option. However, you'll likely end up being directed back to checking the usage of the ngModel directive in your template.

The alternative approach involves delving into the compiler itself and debugging the issue directly. Angular utilizes

node_modules/@angular/compiler/bundles/compiler.umd.js

during compilation.

If we open this file and search for the text

Cannot assign to a reference or variable!

, we will come across the _AstToIrVisitor class and the visitPropertyWrite method containing the following line of code:

// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');

An exception is thrown without shedding much light on the problem 🤨

To better understand the situation, we can insert a console.log(ast) before the exception, where ast represents the parameter of the visitPropertyWrite function. This would log an instance of the PropertyWrite class to the console:

PropertyWrite {
  span: ParseSpan { start: 0, end: 73 },
  receiver: ImplicitReceiver { span: ParseSpan { start: 0, end: 0 } },
  name: 'translation',
  value: MethodCall {
    span: ParseSpan { start: 14, end: 73 },
    receiver: ImplicitReceiver { span: [ParseSpan] },
    name: 'getTranslationForLanguageFromArticle',
    args: [ [PropertyRead], [PropertyRead] ]
  }
}

This process leads us to examine the connection between the translation property and the

getTranslationForLanguageFromArticle

method call. By analyzing your example from Bitbucket, I uncovered the usage of "getTranslationForLanguageFromArticle" within the feed.component.html:

(change)="translation = getTranslationForLanguageFromArticle($event.value, article)"

The parser struggles because translation isn't a class property but rather a local variable accessed implicitly within the *ngVar directive.

A possible solution could involve creating a method like changeTranslation within the component and manipulating the

article.translations[indexOfCorrectArticleTranslation(article)]

there.

At least now you have a clearer direction to follow :)

Answer 3

Answer №2

In my experience, I encountered an error when I inadvertently named a template-control the same as a binding property in my class. Here is an example of what caused the issue:

<input type="password" class="form-control" name="passwordConfirmation" #passwordConfirmation="ngModel" [(ngModel)]="passwordConfirmation"/>

In this case, "passwordConfirmation" serves as both the name of the control in the template and the name of the property/variable in the component class. This confusion led the compiler to attempt to bind to the template variable instead of the class property.

Answer 4

In my experience, I encountered an error when I inadvertently named a template-control the same as a binding property in my class. Here is an example of what caused the issue:

<input type="password" class="form-control" name="passwordConfirmation" #passwordConfirmation="ngModel" [(ngModel)]="passwordConfirmation"/>

In this case, "passwordConfirmation" serves as both the name of the control in the template and the name of the property/variable in the component class. This confusion led the compiler to attempt to bind to the template variable instead of the class property.

Answer 5

Answer №3

It seems that one of the variable names is causing an issue, making it difficult to pinpoint the exact problem without thorough debugging. I recommend checking all instances of ngIf, ngModel, ngFor, etc. in your project as you may be inadvertently using the same variable name multiple times.

Answer 6

It seems that one of the variable names is causing an issue, making it difficult to pinpoint the exact problem without thorough debugging. I recommend checking all instances of ngIf, ngModel, ngFor, etc. in your project as you may be inadvertently using the same variable name multiple times.

Answer 7

Answer №4

I encountered a situation where [(ngValue)] was utilized instead of using [ngValue]

Answer 8

I encountered a situation where [(ngValue)] was utilized instead of using [ngValue]

Error encountered during Angular production build: Attempting to assign value to a reference or variable not possible

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unlocking the union of elements within a diverse array of objects

Ways to verify that the Google Analytics code is functioning properly within an Angular 2 application

Having difficulty deploying the ASP.Net application in Visual Studio

Establish a connection with MongoDB and make changes to the data

What is npm's approach to managing circular dependencies?

Having trouble triggering an alert() after a successful post to the database

What could be causing the rejection of my front-end request to the back-end service?

What is the correct way to refer to "this" within an Angular2 component template?

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

Numeric String Expected Error Encountered in NestJS DTO Validation

Changing the default headless browser to chrome in Cypress: A step-by-step guide

Issue with NgRx store: Incorrect parameter types being passed in reducer function

Steps for transferring .pem files to Typescript outDir

Command line functionality to eliminate comments in HTML minifier

Design your own Angular 2 Directive for effortless element dragging!

Having trouble with npm installing bower?

Fresh Gatsby version 5.2 Setup Triggering `NPM WARN` Alerts for `react-server-dom-webpack``

Is there a way to fetch a particular object from Firebase database based on its value using AngularFire2?

To prevent callback hell in Angular 2 when making multiple HTTP requests

Is it possible to execute multiple scripts simultaneously when webpack watch is triggered?