angulartypescriptecmascript-6package.jsontsconfig

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


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"
    ]
}

Solution

  • 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
      }
    }