Angular16项目迁移后无法编译.tsx文件的技术求助

问题概述 #

从Angular9迁移到Angular16后，项目中的.tsx文件执行npm build时出现解析错误：

Could not resolve "../../components/graphiql/graphiql.component.tsx" from "dist/my-library/esm2022/lib/pages/create-template/create-template.component.mjs"

提示@angular-devkit/build-angular:ng-packagr不支持.tsx文件，已尝试更新React/Angular依赖、调整tsconfig配置、更换构建器，但问题未解决。

依赖与配置信息 #

Angular相关依赖 #

"@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相关依赖 #

"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"
  ]
}

解决方案 #

1. 配置库项目的tsconfig识别.tsx文件 #

如果是构建Angular库，修改tsconfig.lib.json：

• 在include数组中添加**/*.tsx：

  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
  

• 确认compilerOptions中的jsx设置为react（与根tsconfig保持一致）。

2. 让ng-packagr允许.tsx后缀 #

在项目根目录的ng-package.json中添加allowedExtensions字段：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist/my-library",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "allowedExtensions": [".tsx"]
}

3. 调整angular.json的构建配置 #

在angular.json中找到库项目的build配置，确保：

• tsConfig指向包含.tsx配置的tsconfig.lib.json
• 添加files字段确保.tsx文件被纳入构建：

"projects": {
  "my-library": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        "options": {
          "tsConfig": "./projects/my-library/tsconfig.lib.json",
          "project": "./projects/my-library/ng-package.json",
          "files": [
            "**/*.tsx"
          ]
        }
      }
    }
  }
}

4. 用custom-webpack扩展构建（备选方案） #

利用已安装的@angular-builders/custom-webpack，创建自定义webpack配置处理.tsx：

1. 项目根目录新建webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: 'tsconfig.json'
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

2. 修改angular.json中的构建器并指定webpack配置：

"projects": {
  "my-library": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:ng-packagr",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          "tsConfig": "./projects/my-library/tsconfig.lib.json",
          "project": "./projects/my-library/ng-package.json"
        }
      }
    }
  }
}

5. 升级React版本排查兼容性 #

当前React 16.14.0与Angular16可能存在兼容性问题，尝试升级React到18.x版本（同步更新@types/react和@types/react-dom到对应版本）后重新构建测试。

内容的提问来源于stack exchange，提问作者PranjalJoshi