fix(@angular-devkit/build-angular): show warning when using TypeScript target older then ES2022 in esbuild builder

This commits adds a warning similar to that in the Webpack builder.

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts

@@ -160,37 +160,6 @@ export function createCompilerPlugin(
         build.initialOptions.define[key] = value.toString();
       }
 
-      // The tsconfig is loaded in setup instead of in start to allow the esbuild target build option to be modified.
-      // esbuild build options can only be modified in setup prior to starting the build.
-      const {
-        options: compilerOptions,
-        rootNames,
-        errors: configurationDiagnostics,
-      } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
-        noEmitOnError: false,
-        suppressOutputPathCheck: true,
-        outDir: undefined,
-        inlineSources: pluginOptions.sourcemap,
-        inlineSourceMap: pluginOptions.sourcemap,
-        sourceMap: false,
-        mapRoot: undefined,
-        sourceRoot: undefined,
-        declaration: false,
-        declarationMap: false,
-        allowEmptyCodegenFiles: false,
-        annotationsAs: 'decorators',
-        enableResourceInlining: false,
-      });
-
-      if (compilerOptions.target === undefined || compilerOptions.target < ts.ScriptTarget.ES2022) {
-        // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
-        // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
-        // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
-        compilerOptions.target = ts.ScriptTarget.ES2022;
-        compilerOptions.useDefineForClassFields ??= false;
-        // TODO: show warning about this override when we have access to the logger.
-      }
-
       // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files
       let fileEmitter: FileEmitter | undefined;
 
@@ -203,6 +172,52 @@ export function createCompilerPlugin(
         // Reset stylesheet resource output files
         stylesheetResourceFiles = [];
 
+        // The tsconfig is loaded in setup instead of in start to allow the esbuild target build option to be modified.
+        // esbuild build options can only be modified in setup prior to starting the build.
+        const {
+          options: compilerOptions,
+          rootNames,
+          errors: configurationDiagnostics,
+        } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
+          noEmitOnError: false,
+          suppressOutputPathCheck: true,
+          outDir: undefined,
+          inlineSources: pluginOptions.sourcemap,
+          inlineSourceMap: pluginOptions.sourcemap,
+          sourceMap: false,
+          mapRoot: undefined,
+          sourceRoot: undefined,
+          declaration: false,
+          declarationMap: false,
+          allowEmptyCodegenFiles: false,
+          annotationsAs: 'decorators',
+          enableResourceInlining: false,
+        });
+
+        if (
+          compilerOptions.target === undefined ||
+          compilerOptions.target < ts.ScriptTarget.ES2022
+        ) {
+          // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
+          // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
+          // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
+          compilerOptions.target = ts.ScriptTarget.ES2022;
+          compilerOptions.useDefineForClassFields ??= false;
+
+          (result.warnings ??= []).push({
+            text:
+              'TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
+              '"false" respectively by the Angular CLI.',
+            location: { file: pluginOptions.tsconfig },
+            notes: [
+              {
+                text: `To control ECMA version and features use the Browerslist configuration. ' +
+                  'For more information, see https://github.com/browserslist/browsers§list'`,
+              },
+            ],
+          });
+        }
+
         // Create TypeScript compiler host
         const host = ts.createIncrementalCompilerHost(compilerOptions);
 
@@ -316,80 +331,74 @@ export function createCompilerPlugin(
         return result;
       });
 
-      build.onLoad(
-        { filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ },
-        async (args) => {
-          assert.ok(fileEmitter, 'Invalid plugin execution order');
+      build.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, async (args) => {
+        assert.ok(fileEmitter, 'Invalid plugin execution order');
 
-          const typescriptResult = await fileEmitter(
-            pluginOptions.fileReplacements?.[args.path] ?? args.path,
-          );
-          if (!typescriptResult) {
-            // No TS result indicates the file is not part of the TypeScript program.
-            // If allowJs is enabled and the file is JS then defer to the next load hook.
-            if (compilerOptions.allowJs && /\.[cm]?js$/.test(args.path)) {
-              return undefined;
-            }
-
-            // Otherwise return an error
-            return {
-              errors: [
-                {
-                  text: 'File is missing from the TypeScript compilation.',
-                  location: { file: args.path },
-                  notes: [
-                    {
-                      text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
-                    },
-                  ],
-                },
-              ],
-            };
-          }
-
-          const data = typescriptResult.content ?? '';
-          const forceAsyncTransformation = /async\s+function\s*\*/.test(data);
-          const useInputSourcemap =
-            pluginOptions.sourcemap &&
-            (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
-
-          // If no additional transformations are needed, return the TypeScript output directly
-          if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations) {
-            return {
-              // Strip sourcemaps if they should not be used
-              contents: useInputSourcemap
-                ? data
-                : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
-              loader: 'js',
-            };
-          }
+        const typescriptResult = await fileEmitter(
+          pluginOptions.fileReplacements?.[args.path] ?? args.path,
+        );
+        if (!typescriptResult) {
+          // No TS result indicates the file is not part of the TypeScript program.
+          // Otherwise return an error
+          return /\.[cm]?js$/.test(args.path)
+            ? undefined
+            : {
+                errors: [
+                  {
+                    text: 'File is missing from the TypeScript compilation.',
+                    location: { file: args.path },
+                    notes: [
+                      {
+                        text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
+                      },
+                    ],
+                  },
+                ],
+              };
+        }
 
-          const babelResult = await transformAsync(data, {
-            filename: args.path,
-            inputSourceMap: (useInputSourcemap ? undefined : false) as undefined,
-            sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
-            compact: false,
-            configFile: false,
-            babelrc: false,
-            browserslistConfigFile: false,
-            plugins: [],
-            presets: [
-              [
-                angularApplicationPreset,
-                {
-                  forceAsyncTransformation,
-                  optimize: pluginOptions.advancedOptimizations && {},
-                },
-              ],
-            ],
-          });
+        const data = typescriptResult.content ?? '';
+        const forceAsyncTransformation = /async\s+function\s*\*/.test(data);
+        const useInputSourcemap =
+          pluginOptions.sourcemap &&
+          (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
 
+        // If no additional transformations are needed, return the TypeScript output directly
+        if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations) {
           return {
-            contents: babelResult?.code ?? '',
+            // Strip sourcemaps if they should not be used
+            contents: useInputSourcemap
+              ? data
+              : data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
             loader: 'js',
           };
-        },
-      );
+        }
+
+        const babelResult = await transformAsync(data, {
+          filename: args.path,
+          inputSourceMap: (useInputSourcemap ? undefined : false) as undefined,
+          sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
+          compact: false,
+          configFile: false,
+          babelrc: false,
+          browserslistConfigFile: false,
+          plugins: [],
+          presets: [
+            [
+              angularApplicationPreset,
+              {
+                forceAsyncTransformation,
+                optimize: pluginOptions.advancedOptimizations && {},
+              },
+            ],
+          ],
+        });
+
+        return {
+          contents: babelResult?.code ?? '',
+          loader: 'js',
+        };
+      });
 
       build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
         const data = await fs.readFile(args.path, 'utf-8');