Assignment of a outer scope variable in a closure failing when optimization enabled

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

Assignment of a outer scope variable in a closure, that works perfectly in development mode, it’s failing when optimization are enabled.

This error can be reproduced following the next steps:

1. Define a string variable with a default value.
2. Update it in a closure.
3. Just after the closure, use +=to concatenate something the variable.

The variable, at the end, contains the initial value followed by the concatenated one. The value set in the closure is lost.

I’ve been able to reproduce this issue with latest versions of angular 13 and 14 when optimization is enabled ("optimization": true) but not with angular 15.

Example of failing code:

  problem(): string {
    let url = 'If you see this, there is a problem.';
    let query = (() => {
      url = 'If you see this, all is right.';
      console.log('Updating URL (1): ' + url);
      return '';
    })();
    url += query;
    console.log('Updating URL (2): ' + url);
    return url;
  }

Please provide a link to a minimal reproduction of the bug

https://github.com/josepm9/ng-optimization-enabled-issue

Please provide the exception or error you saw

Please use the example (master or release/angular14 branch) to reproduce the error.

1) Start the example (`npm run start`)
2) Browse the main page (http://localhost:4200/)

Expected page content:

Angular 15.0.4
Problem: If you see this, all is right.
No problem: If you see this, all is right.

Actual page content:

Angular 13.3.12
Problem: If you see this, there is a problem.
No problem: If you see this, all is right.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.3.10
Node: 16.16.0
Package Manager: npm 8.11.0
OS: linux x64

Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.10
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.3.10
@angular-devkit/schematics      13.3.10
@angular/cli                    13.3.10
@schematics/angular             13.3.10
rxjs                            7.8.0
typescript                      4.6.4

Anything else?

I’ve been able to reproduce this issue with latest versions of angular 13 and 14 when optimization is enabled ("optimization": true) but not with angular 15.

Angular 14 environment:

Angular CLI: 14.2.10
Node: 16.16.0
Package Manager: npm 8.11.0 
OS: linux x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cli                    14.2.10
@schematics/angular             14.2.10
rxjs                            7.8.0
typescript                      4.8.4

[alan-agius4]

Version 14 is in LTS and only security fixes are applied. Please see: https://angular.io/guide/releases#lts-fixes

Closing as this issue is not reproducible using the current latest version 15

[alan-agius4]

@josepm9, this seem to be solved in version 15. Please update to the more recent version of Angular.