Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d749ba6

Browse files
committed
fix(@angular/build): allow direct bundling of TSX files with application 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. (cherry picked from commit 13b65df)
1 parent b91c82d commit d749ba6

File tree

2 files changed

+42
-1
lines changed

2 files changed

+42
-1
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,33 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
4747

4848
expect(result?.success).toBe(true);
4949
});
50+
51+
it('supports TSX files with isolated modules enabled and enabled optimizations', async () => {
52+
// Enable tsconfig isolatedModules option in tsconfig
53+
await harness.modifyFile('tsconfig.json', (content) => {
54+
const tsconfig = JSON.parse(content);
55+
tsconfig.compilerOptions.isolatedModules = true;
56+
tsconfig.compilerOptions.jsx = 'react-jsx';
57+
58+
return JSON.stringify(tsconfig);
59+
});
60+
61+
await harness.writeFile('src/types.d.ts', `declare module 'react/jsx-runtime' { jsx: any }`);
62+
await harness.writeFile('src/abc.tsx', `export function hello() { return <h1>Hello</h1>; }`);
63+
await harness.modifyFile(
64+
'src/main.ts',
65+
(content) => content + `import { hello } from './abc'; console.log(hello());`,
66+
);
67+
68+
harness.useTarget('build', {
69+
...BASE_OPTIONS,
70+
optimization: true,
71+
externalDependencies: ['react'],
72+
});
73+
74+
const { result } = await harness.executeOnce();
75+
76+
expect(result?.success).toBe(true);
77+
});
5078
});
5179
});

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import type {
1010
BuildFailure,
11+
Loader,
1112
Metafile,
1213
OnStartResult,
1314
OutputFile,
@@ -409,9 +410,21 @@ export function createCompilerPlugin(
409410
typeScriptFileCache.set(request, contents);
410411
}
411412

413+
let loader: Loader;
414+
if (useTypeScriptTranspilation || isJS) {
415+
// TypeScript has transpiled to JS or is already JS
416+
loader = 'js';
417+
} else if (request.at(-1) === 'x') {
418+
// TSX and TS have different syntax rules. Only set if input is a TSX file.
419+
loader = 'tsx';
420+
} else {
421+
// Otherwise, directly bundle TS
422+
loader = 'ts';
423+
}
424+
412425
return {
413426
contents,
414-
loader: useTypeScriptTranspilation||isJS ? 'js' : 'ts',
427+
loader,
415428
};
416429
});
417430

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /