JavaScriptOptimizerPlugin doesn't emit ES2015 even if requested

[stnor]

Command

build

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.x

Description

I am getting a Nullish coalescing operator (??) (es2022) in main.js when building for production on Angular 15. When building for development everything works fine on iOS 12.5

Generated Webpack config:

  optimization: {
    minimizer: [
      [JavaScriptOptimizerPlugin],
      TransferSizePlugin {},
      [CssOptimizerPlugin]
    ],

If I remove the JavaScriptOptimizerPlugin from the prod build's webpack config manually (using custom-webpack), the web page loads in IOS 12.5 (ES2015), so the issue seems to be related to the optimizer.

I am aware that older browsers like IOS 12.5 isn't supported, but I really want to upgrade to 15 and build for ES2015.

The optimizer is called with the following config:

JavaScriptOptimizerPlugin {
  options: {
    define: { ngDevMode: false, ngI18nClosureMode: false, ngJitMode: false },
    sourcemap: true,
    supportedBrowsers: [
      'and_chr 112',       'android 112',       'chrome 112',
      'chrome 111',        'chrome 110',        'chrome 109',
      'chrome 108',        'chrome 107',        'chrome 106',
      'chrome 105',        'chrome 104',        'chrome 103',
      'edge 112',          'edge 111',          'edge 110',
      'edge 109',          'edge 108',          'edge 107',
      'edge 106',          'edge 105',          'edge 104',
      'edge 103',          'firefox 112',       'firefox 111',
      'firefox 110',       'firefox 109',       'firefox 108',
      'firefox 107',       'firefox 106',       'firefox 105',
      'firefox 104',       'firefox 103',       'firefox 102',
      'ios_saf 16.4',      'ios_saf 16.3',      'ios_saf 16.2',
      'ios_saf 16.1',      'ios_saf 16.0',      'ios_saf 15.6',
      'ios_saf 15.5',      'ios_saf 15.4',      'ios_saf 15.2-15.3',
      'ios_saf 15.0-15.1', 'ios_saf 14.5-14.8', 'ios_saf 14.0-14.4',
      'ios_saf 13.4-13.7', 'ios_saf 13.3',      'ios_saf 13.2',
      'ios_saf 13.0-13.1', 'ios_saf 12.2-12.5', 'safari 16.4',
      'safari 16.3',       'safari 16.2',       'safari 16.1',
      'safari 16.0',       'safari 15.6',       'safari 15.5',
      'safari 15.4',       'safari 15.2-15.3',  'safari 15.1',
      'safari 15',         'safari 14.1',       'safari 14',
      'safari 13.1',       'safari 13',         'samsung 20'
    ],
    keepIdentifierNames: false,
    keepNames: false,
    removeLicenses: true,
    advanced: true
  },
  targets: [
    'chrome112.0',  'chrome111.0',  'chrome110.0',  'chrome109.0',
    'chrome108.0',  'chrome107.0',  'chrome106.0',  'chrome105.0',
    'chrome104.0',  'chrome103.0',  'edge112.0',    'edge111.0',
    'edge110.0',    'edge109.0',    'edge108.0',    'edge107.0',
    'edge106.0',    'edge105.0',    'edge104.0',    'edge103.0',
    'firefox112.0', 'firefox111.0', 'firefox110.0', 'firefox109.0',
    'firefox108.0', 'firefox107.0', 'firefox106.0', 'firefox105.0',
    'firefox104.0', 'firefox103.0', 'firefox102.0', 'ios16.4',
    'ios16.3',      'ios16.2',      'ios16.1',      'ios16.0',
    'ios15.6',      'ios15.5',      'ios15.4',      'ios15.2',
    'ios15.0',      'ios14.5',      'ios14.0',      'ios13.4',
    'ios13.3',      'ios13.2',      'ios13.0',      'ios12.2',
    'safari16.4',   'safari16.3',   'safari16.2',   'safari16.1',
    'safari16.0',   'safari15.6',   'safari15.5',   'safari15.4',
    'safari15.2',   'safari15.1',   'safari15.0',   'safari14.1',
    'safari14.0',   'safari13.1',   'safari13.0'
  ]
}

Minimal Reproduction

I was unable to reproduce on a vanilla project with a .browserslist containing ios_saf >= 12.5 I compared the javascript-optimizer files between 14.2.x and 15.2.x and can see there are some changes, but cannot figure out why the 15.2.x branch doesn't produce ES2015 for main (or other bundles).

Exception or Error

I'm getting a Nullish coalescing operator (??) in the main bundle which Safari on iOS 12.5 doesn't recognise. Here's a part of the main bundle (pretty printed) - this is NOT our code, btw.

function vt($, d, b) {
                const be = Mt($.element, $.triggerName, $.fromState, $.toState, d || $.phaseName, b.totalTime ?? $.totalTime, !!b.disabled),
                    ke = $._data;
                return null != ke && (be._data = ke), be
            }

Your Environment

Angular CLI: 15.2.6
Node: 16.16.0
Package Manager: yarn 3.5.0
OS: darwin x64

Angular: 15.2.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.6
@angular-devkit/build-angular   15.2.6
@angular-devkit/core            15.2.6
@angular-devkit/schematics      15.2.6
@schematics/angular             15.2.6
rxjs                            7.5.4
typescript                      4.8.4
webpack                         5.79.0

Anything else relevant?

Same issue when building on the build server (on linux). Any help much appreciated, as we've spent quite a lot of work getting the (very large) code base up to 15.

[stnor]

I should add we're using yarn pnp, but it doesn't seem to matter if we turn it off.

[clydin]

This appears to have been reported in #24347 and should have been fixed in 15.0.3. Can you provide the output of yarn list --pattern @angular-devkit/?

[stnor]

I run yarn 3.5 (berry) so I don't have access to yarn list :(

yarn info --recursive --dependents showed a bunch of mixed 15.0.0 and 15.2.6 deps, so I cleared the yarn.lock and reinstalled. Solved it.

You're a life-saver!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}