Application code is not being 'up-targeted' to ES2022 despite warning message from CLI

[simeyla]

Command

build, serve

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

The following message is shown by the CLI if changing target to ES2015 for Angular 15 +

TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

However code running in the browser using ?? (a pre ES2022 feature) is still transpiled, even without any changes to Browserslist.

Either there is a bug, or the message needs to be rewritten to be clearer as to what is really happening.

See also: commit for #23936 by @alan-agius4

Minimal Reproduction

// 16.0.3
Run ng new project-name

Update tsconfig.json to

compilerOptions: {
   "target": "ES2015"
}

Add the following line of code to AppComponent.ts:

person = null ?? { name: 'Simon' };`

Run ng serve

View main.js in browser and observe that the code has been transpiled:

this.person = false ? 0 : {
    name: 'Simon'
};

With target set to ES2022 the ?? remains:

this.person = null ?? {
    name: 'Simon'
};

Exception or Error

The code is still being transpiled, despite the warning message telling me it has been up-targeted to ES2022.

Your Environment

Angular CLI: 16.0.3
Node: 18.14.0
Package Manager: npm 9.3.1
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.3
@angular-devkit/build-angular   16.0.3
@angular-devkit/core            16.0.3
@angular-devkit/schematics      16.0.3
@schematics/angular             16.0.3
rxjs                            7.8.1
typescript                      5.0.4

Anything else relevant?

This is similar to #24435, but that is related to useDefineForClassFields and not target.

See my answer here: https://stackoverflow.com/questions/75047760/typescript-target-warnings-after-angular-15-update/76369523#76369523

The main reason this is an issue is because you can observe your user code is transpiled, but Angular / vendor code is not - which may lead to a false sense of security if needing to target older browsers.

[alan-agius4]

This is working as expected.

TLDR; it’s the browerslist configuration that controls which ECMA version is outputted at the end not the TypeScript target.

The TypeScript output is indeed always transpilled to ES2022, later the outputted JS together with all the node packages are passed to Babel and based on the desired browser support configured (if not configured the default list of supported browsers by Angular https://angular.io/guide/browser-support is used) individual ES features are downlevelled.

[simeyla]

Thanks for the quick reply. But I believe something is still amiss.

I literally ONLY changed target="ES2022" to target="ES2015" for a brand new v16 project, and the output (for my application code) is being transpiled according to the value I had set in target. Maybe it gets transpiled AGAIN by the CLI at a later phase to ES2022, but from my point of view that's not what the warning message tells me.

In Angular 16 if I have {...cat, ...dog} then it becomes Object.assign(Object.assign({}, cat), dog); without ever touching the default Angular 16 Browserlist.

Your commit included the following, which clearly mirrors the intent of the warning message. But it simply doesn't seem to be taking effect. My code is still being compiled to the original target.

if (tsConfig.options.target === undefined || tsConfig.options.target < ScriptTarget.ES2022) {
    tsConfig.options.target = ScriptTarget.ES2022;
}

I'm good with my own project now obviously, but I think there's scope either for an clearer message or perhaps this is a subtle regression. I got caught in my own app when I discovered all my spreads had become Object.assign leading to a subtle bug.

[alan-agius4]

There appeared to be indeed an issue which should be addressed in #25296.

[angular-automatic-lock-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.}