如何将.tsx文件导入Angular14？

Question

我试图将嵌入到转角中，因为我编写了一些React组件，只是因为它使用了react库。但是，我的主要框架仍然是Angular12+。

我有这个.tsx文件src/app/my-react-component.tsx

import * as React from 'react';

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

我想从src/app/app.component.ts导入这个

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

然后，我看到了这个错误

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

为了尝试，我将"jsx": "react"添加到tsconfig.json中，但没有工作，这是来自https://codebyz.com/embedding-react-components-in-angular-the-easy-way/的解决方案。

这是stackblitz页面，您可以看到这个错误。

有谁能成功地将.tsx导入到中？

Answer 1

我觉得你一切都做得对

1. 在jsx: react中指定tsconfig
2. 创建一个带有React呈现的包装器(使用独立指令，它变得更简单了)

这只是Stackblitz的一个错误，因为他们有自己的文字记录编译的愿景。

下面是一个具有相同代码来自代码箱的链接