Typescript warning after update: TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022"

Question

I'm in the process of upgrading my front end libraries with the following commands.

ncu -u

npm install --legacy-peer-deps

The following have been updated that I believe are relevant.

typescript 4.8.4   -> 5.0.4

Angular    14      -> 16

Node       16.13.2 -> 18.16.0

npm        8.x.x   -> 9.6.6

NgRx       14      -> 16 (probably not relevant)

RxJs       7.5.x   -> 7.8.x (probably not relevant)

After starting up I'm getting the following warning,

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.

While this is only a warning we would like to resolve this warning in a meaningful way. Right now we are running the target of ES2015 and setting it to ES2022 is not really an option for us. Doing so creates errors which prevent us from loading up our app. This will almost certainly persist across our entire front end stack.

Below is our tsconfig.json

I've done a fair amount of digging on this so I'm all for suggestions, guidance and explanations are all very welcome. Thank you!

tsconfig.json

{
    "compileOnSave": true,
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "preserveWhitespaces": true,
        "strictInjectionParameters": true,
        "disableTypeScriptVersionCheck": true,
        "enableIvy": true
    },
    "compilerOptions": {
        "baseUrl": "src",
        "declaration": false,
        "downlevelIteration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "mapRoot": "./",
        "outDir": "./dist",
        "sourceMap": true,
        "removeComments": false,
        "noImplicitAny": false,
        "moduleResolution": "node",
        "module": "ESNext",
        "target": "ES2015",
        "lib": [
            "dom"
        ],
        "paths": {
            "ctm-common": [
                "app/+common"
            ],
            "ctm-shared": [
                "app/+shared"
            ],
            "ctm-store": [
                "app/+store"
            ],
            "ctm-store/*": [
                "app/+store/*"
            ]
        },
        "types": [
            "jasmine",
            "node",
            "gsap"
        ],
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules/rxjs/symbol",
            "./node_modules/angular-split"
        ]
    },
    "files": [
        "src/app/app.module.ts",
        "src/app/admin/admin.module.ts",
        "src/app/portal/portal.module.ts",
        "src/app/portfolios/portfolios.module.ts",
        "src/app/navigate/navigate.module.ts",
        "src/app/visuals/visuals.module.ts",
        "src/app/users/user-report.module.ts",
        "src/app/promoter/promoter.module.ts",
        "src/app/diagnostics/diagnostic.module.ts",
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "./node_modules/angular-split/angular-split.d.ts",
        "./node_modules/ngx-clipboard/*/**.ts",
        "./node_modules/gsap/*"
    ],
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Pharisaic

Answer 1

Setting the target to ES2022 and the useDefineForClassFields to false fixes the problem. See my tsconfig.json below.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    //"outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Pharisaic

It turns out when I originally set the target to ES2022 my webserver UI would not start. At the time I attributed it to setting target to ES2022 and backed off. I have come back to try this again and everything started up just fine. The issue with my webserver not starting was problem something else unrelated at the time. – Pharisaic

This (setting "useDefineForClassFields": false) did not help in my case. I'm still looking for a solution. – Stimulus