TSX/JSX compilation support #66262
Description
Which @angular/* package(s) are the source of the bug?
compiler-cli
Is this a regression?
No
Description
There are libraries like @bubblydoo/angular-react that help to use multiple frameworks (React + Angular) at the same time.
The core developers of this library discovered that, starting from some point, the builder has been broken for TSX/JSX files (at least since @angular/compiler-cli@13). They applied a patch for their own needs using Yarn. It works, but it has to be maintained separately for each framework version.
So, I assume it might not be very hard to fix, since the issue has already been identified by the patch authors (see the patch here, and the source file that needs to be modified is located here).
I can provide a PR with this fix if this is an acceptable way to address this kind of issue.
Here is an example of the issue (after upgrading to ng@15 and removing the Yarn patch; the issue persists even after upgrading to the latest Angular version):
Please provide a link to a minimal reproduction of the bug
https://github.com/bubblydoo/angular-react
Please provide the exception or error you saw
Error [RollupError]: Could not resolve "../react-wrapper/react-wrapper.component.tsx" from "../../dist/angular-react/esm2020/lib/templates/react-to-template-ref.component.mjs"
at error (/Users/mokeev1995/git/angular-react-orig/node_modules/rollup/dist/shared/rollup.js:353:30)
at ModuleLoader.handleInvalidResolvedId (/Users/mokeev1995/git/angular-react-orig/node_modules/rollup/dist/shared/rollup.js:26015:24)
at /Users/mokeev1995/git/angular-react-orig/node_modules/rollup/dist/shared/rollup.js:25977:26 {
code: 'UNRESOLVED_IMPORT',
exporter: '../react-wrapper/react-wrapper.component.tsx',
id: '/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/react-to-template-ref.component.mjs',
watchFiles: [
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/bubblydoo-angular-react.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/public-api.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/angular-react.service.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/angular-react.module.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/react-wrapper/react-wrapper.component.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/angular-context/angular-context.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/angular-wrapper/angular-wrapper.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/angular-wrapper-with-module/angular-wrapper-with-module.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/use-injected/use-injected.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/use-observable/use-observable.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/angular-template-outlet.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/react-to-template-ref.component.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/template-outlet.component.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/use-to-angular-template-ref.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/templates/is-top-level-react-token.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/injectable-react-context/react-context-token.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/injectable-react-context/use-injectable-react-context.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/use-in-tree-create-root/in-tree-create-root-token.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/use-in-tree-create-root/use-in-tree-create-root.mjs',
'/Users/mokeev1995/git/angular-react-orig/dist/angular-react/esm2020/lib/nest-wrappers/nest-wrappers.mjs'
]
}
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 15.2.11
Node: 22.14.0 (Unsupported)
Package Manager: yarn 3.4.1
OS: darwin arm64
Angular: 15.2.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.11
@angular-devkit/build-angular 15.2.11
@angular-devkit/core 15.2.11
@angular-devkit/schematics 15.2.11
@angular/cli 15.2.11
@schematics/angular 15.2.11
ng-packagr 15.2.2
rxjs 7.5.7
typescript 4.9.5
Anything else?
No response