Command

build

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

non esbuild builder

Description

I get the warning [WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. when building using browser-esbuild. But when looking at the output, it seems as if the useDefineForClassFields is set to true.

This setting causes the following example to be compiled/transpiled incorrectly, causing undefined errors:

class XYZ extends W {
private readonly whatever = this.query.watch(
    {},
    {
      fetchPolicy: 'network-only',
    },
  );

  constructor(
    private readonly query: GetSomething
  ) {
    super();
  }
}

var _XYZ = class extends W {
  constructor(query) {
    super();
    __publicField(this, "query");
    __publicField(this, "whatever", this.query.watch({}, {
      fetchPolicy: "network-only"
    }));
    this.query = query;
}

As can be seen in the above example the constructor assignment is done last. I initially thought it was due to esbuild, so I had already opened an issue there which pointed me to the typescript config. (evanw/esbuild#2738 (comment))

I am not sure if this is correct behaviour from typescript (the wrong order of assignment), or if this just isn't supported anymore?

Minimal Reproduction

Here's a typescript example with target: ES2021:

https://www.typescriptlang.org/play?useDefineForClassFields=true&target=8#code/MYGwhgzhAEAaCaAtaBTAHgFxQOwCYwHVoBvAKAAcAnASwDcwtpKUxcB7bEAT2gHcALBilopK0ALzQM-ahAB0ARwCuornN4Ng-ABSlo+kgF8ANHoNkDBgGYoMWgApsQ1YFwBc0AOTZbvNpQBrAFoObk9TSxMzAEoAblIzYA4IDEolYAx-XUsqOiEmFnZOHmVVDwBxWwBlNgBbWxlsAHMYkjN9CCVyUW04s0NSAYwubuhKjBr66WpmiWgwbC5SXBRQMGZoejECDwWloA

And here's one with ES2022 as target

https://www.typescriptlang.org/play?useDefineForClassFields=true&target=99#code/MYGwhgzhAEAaCaAtaBTAHgFxQOwCYwHVoBvAKAAcAnASwDcwtpKUxcB7bEAT2gHcALBilopK0ALzQM-ahAB0ARwCuornN4Ng-ABSlo+kgF8ANHoNkDBgGYoMWgApsQ1YFwBc0AOTZbvNpQBrAFoObk9TSxMzAEoAblIzYA4IDEolYAx-XUsqOiEmFnZOHmVVDwBxWwBlNgBbWxlsAHMYkjN9CCVyUW04s0NSAYwubuhKjBr66WpmiWgwbC5SXBRQMGZoejECDwWloA

Exception or Error

No response

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.3
Node: 19.1.0 (Unsupported)
Package Manager: npm 8.19.3
OS: linux x64

Angular: 15.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.3 (cli-only)
@angular-devkit/build-angular   15.0.3
@angular-devkit/core            15.0.3
@angular-devkit/schematics      15.0.3
@angular/cdk                    15.0.2
@schematics/angular             15.0.3 (cli-only)
rxjs                            7.6.0
typescript                      4.9.4
webpack                         5.75.0

Anything else relevant?

No response