How to import .tsx file into Angular14?

Question

I am trying to embed React Components into Angular because I have written some react components only because it's using a React library. However, my main framework is still Angular12+.

I have this.tsx file src/app/my-react-component.tsx

import * as React from 'react';

export default function MyReact() {
  return (
    <div>
      <h1>Hello My React Component!</h1>
    </div>
  );
}

and I want to import this from src/app/app.component.ts

import MyReact from './my-react-component';

Then, I see this error

Import error, can't find file:
./my-react-component

To try, I added "jsx": "react" to tsconfig.json , but did not work, a solution from https://codebyz.com/embedding-react-components-in-angular-the-easy-way/

This is stackblitz page , which you can see this error.

Anyone who has a victory on importing.tsx into Angular project?

Answer 1

I think you did everything right

1. specify jsx: react in tsconfig
2. create a wrapper with React rendering (with standalone directive it becomes much simpler btw)

It's just an error from Stackblitz because they have their own vision of typescript compilation.

Here is a link with the same code from Codesandbox