{"record":{"id":"660e29a99e22c7f4","repo":"angular/angular-cli","slug":"typescript-compiler-options-target-and-usedefin","errorCode":null,"errorMessage":"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 Browserslist configuration. For more information, see https://angular.dev/tools/cli/build#configuring-browser-compatibility\nNOTE: You can set the \"target\" to \"ES2022\" in the project's tsconfig to remove this warning.","messagePattern":"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 Browserslist configuration\\. For more information, see https://angular\\.dev/tools/cli/build#configuring-browser-compatibility\nNOTE: You can set the \"target\" to \"ES2022\" in the project's tsconfig to remove this warning\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/typescript.ts","lineNumber":38,"sourceCode":"  const optimize = buildOptions.optimization.scripts;\n\n  const compilerOptions: CompilerOptions = {\n    sourceMap: buildOptions.sourceMap.scripts,\n    declaration: false,\n    declarationMap: false,\n    // Disable removing of comments as TS is quite aggressive with these and can\n    // remove important annotations, such as /* @__PURE__ */.\n    removeComments: false,\n  };\n\n  if (tsConfig.options.target === undefined || tsConfig.options.target < ScriptTarget.ES2022) {\n    compilerOptions.target = ScriptTarget.ES2022;\n    // If 'useDefineForClassFields' is already defined in the users project leave the value as is.\n    // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995\n    // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.\n    compilerOptions.useDefineForClassFields ??= false;\n\n    wco.logger.warn(\n      'TypeScript compiler options \"target\" and \"useDefineForClassFields\" are set to \"ES2022\" and ' +\n        '\"false\" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. ' +\n        'For more information, see https://angular.dev/tools/cli/build#configuring-browser-compatibility\\n' +\n        `NOTE: You can set the \"target\" to \"ES2022\" in the project's tsconfig to remove this warning.`,\n    );\n  }\n\n  if (buildOptions.preserveSymlinks !== undefined) {\n    compilerOptions.preserveSymlinks = buildOptions.preserveSymlinks;\n  }\n\n  const fileReplacements: Record<string, string> = {};\n  if (buildOptions.fileReplacements) {\n    for (const replacement of buildOptions.fileReplacements) {\n      fileReplacements[replacement.replace] = replacement.with;\n    }\n  }\n","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/typescript.ts#L20-L56","documentation":"The Angular CLI build warns that it forcibly sets the TypeScript compiler options \"target\" to ES2022 and \"useDefineForClassFields\" to false (unless the user already defined the latter) because Browserslist controls the actual output compatibility. The warning tells you how to silence it and where to control ECMA features instead.","triggerScenarios":"Running an Angular build/dev-server where the project's tsconfig does not set \"target\": \"ES2022\" (or the CLI had to apply useDefineForClassFields: false), in createIvyPlugin via getCommonConfig webpack configuration.","commonSituations":"Upgrading an older Angular workspace whose tsconfig still targets ES2015/ES2020; new projects generated before the ES2022 default; teams surprised that class fields use assignment semantics instead of defineProperty (TypeScript issue #45995 workaround for legacy NGRX @Effects decorators).","solutions":["Set \"target\": \"ES2022\" (and optionally \"useDefineForClassFields\": true/false explicitly) in the project's tsconfig to remove the warning.","Control ECMA version/features for output via Browserslist configuration (.browserslistrc) instead of tsconfig target.","If you rely on defineProperty class-field semantics, explicitly set \"useDefineForClassFields\": true and migrate away from deprecated decorators (e.g. NGRX @Effects)."],"exampleFix":"// before (tsconfig.json)\n{ \"compilerOptions\": { \"target\": \"ES2020\" } }\n// after\n{ \"compilerOptions\": { \"target\": \"ES2022\", \"useDefineForClassFields\": false } }","handlingStrategy":"validation","validationCode":"const tsconfig = require('./tsconfig.json');\nif (tsconfig.compilerOptions?.target !== 'ES2022') {\n  console.warn('Set compilerOptions.target to ES2022 to align with Angular CLI defaults and silence the warning.');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always set \"target\": \"ES2022\" explicitly in new Angular tsconfigs.","Use .browserslistrc for browser compatibility instead of lowering tsconfig target.","Explicitly declare useDefineForClassFields so the CLI never has to guess (matters for NGRX @Effects)."],"tags":["angular","typescript","build-configuration","deprecation"],"backgroundTag":"tsconfig-target-override","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}