fix(@angular/build): allow direct bundling of TSX files with applicat…

…ion builder

When using the application builder with `isolatedModules`, the bundler will
directly handle TypeScript transpilation and bundling. Previously, any input
TSX files were loaded by the bundler as TS files. This difference caused errors
when attempting to process the files since the syntax differs between TSX and TS.
The appropriate loader will now be used if the input file is TSX in this situation.

packages/angular/build/src/builders/application/tests/behavior/typescript-isolated-modules_spec.ts

@@ -47,5 +47,33 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
  expect(result?.success).toBe(true);
  });
+
+ it('supports TSX files with isolated modules enabled and enabled optimizations', async () => {
+ // Enable tsconfig isolatedModules option in tsconfig
+ await harness.modifyFile('tsconfig.json', (content) => {
+ const tsconfig = JSON.parse(content);
+ tsconfig.compilerOptions.isolatedModules = true;
+ tsconfig.compilerOptions.jsx = 'react-jsx';
+
+ return JSON.stringify(tsconfig);
+ });
+
+ await harness.writeFile('src/types.d.ts', `declare module 'react/jsx-runtime' { jsx: any }`);
+ await harness.writeFile('src/abc.tsx', `export function hello() { return <h1>Hello</h1>; }`);
+ await harness.modifyFile(
+ 'src/main.ts',
+ (content) => content + `import { hello } from './abc'; console.log(hello());`,
+ );
+
+ harness.useTarget('build', {
+ ...BASE_OPTIONS,
+ optimization: true,
+ externalDependencies: ['react'],
+ });
+
+ const { result } = await harness.executeOnce();
+
+ expect(result?.success).toBe(true);
+ });
  });
 });

packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts

@@ -8,6 +8,7 @@
 
 import type {
  BuildFailure,
+ Loader,
  Metafile,
  OnStartResult,
  OutputFile,
@@ -461,9 +462,21 @@ export function createCompilerPlugin(
  typeScriptFileCache.set(request, contents);
  }
 
+ let loader: Loader;
+ if (useTypeScriptTranspilation || isJS) {
+ // TypeScript has transpiled to JS or is already JS
+ loader = 'js';
+ } else if (request.at(-1) === 'x') {
+ // TSX and TS have different syntax rules. Only set if input is a TSX file.
+ loader = 'tsx';
+ } else {
+ // Otherwise, directly bundle TS
+ loader = 'ts';
+ }
+
  return {
  contents,
- loader: useTypeScriptTranspilation || isJS ? 'js' : 'ts',
+ loader,
  };
  });