无法在 Angular16 项目中编译 .tsx 文件

Question

我最近将我的 Angular9 项目迁移到 Angular16。在我现有的 Angular 9 项目中，我有一些 .tsx 文件，这些文件在 npm 构建期间成功编译。然而，在迁移到 Angular 16 后出现此错误 -

`无法从“dist/my-library/esm2022/lib/pages/create-template/create-template.component.mjs”解析“../../components/graphiql/graphiql.component.tsx”

@angular-devkit/build-angular:ng-packagr 似乎不支持 .tsx 文件。 `

尝试更新反应包、角度包的版本，尝试tsconfig.json中的所有组合尝试更新角度构建器。

角度构建器 - @angular-devkit/build-angular:ng-packagr

package.json

角度包

"@angular-builders/custom-webpack": "^16.0.0",
"@angular-devkit/build-angular": "^16.1.0",
"@angular-eslint/builder": "16.1.0",
"@angular-eslint/eslint-plugin": "16.1.0",
"@angular-eslint/eslint-plugin-template": "16.1.0",
"@angular-eslint/schematics": "16.1.0",
"@angular-eslint/template-parser": "16.1.0",
"@angular/animations": "^16.1.0",
"@angular/cli": "^16.0.4",
"@angular/common": "^16.1.0",
"@angular/compiler": "^16.1.0",
"@angular/compiler-cli": "^16.1.0",
"@angular/core": "^16.1.0",
"@angular/elements": "^16.1.0",
"@angular/forms": "^16.1.0",
"@angular/language-service": "^16.1.0",
"@angular/localize": "^16.1.0",
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",

反应包

"react": "^16.14.0",
"react-dom": "^16.14.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",

graphiql 包

"graphiql": "^0.17.5",
"graphiql-explorer": "^0.6.2",
"graphql": "^14.3.1",
"graphql-language-service-interface": "2.8.2",
"graphql-language-service-parser": "1.9.0",
"graphql-language-service-utils": "2.5.2",
"graphql-ws": "^4.2.2",

tsconfig.json

"compilerOptions": {
      "baseUrl": "./",
      "downlevelIteration": true,
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "module": "ES2020",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "ES2020",
      "allowSyntheticDefaultImports": true,
      "jsx": "react",
      "skipLibCheck": true,
      "traceResolution":true,
      "typeRoots": [
        "node_modules/@types"
      ],
   ......}

Answer 1

您正在使用

.tsx

作为角度组件

graphiql.component.tsx

，需要更改为

.ts

使用 `React.createElement

调用反应组件

   const element = React.createElement(CustomGraphiQL, {});
   ReactDom.render(element, this.containerRef.nativeElement);