如何解析 Angular 2 / Angular - Cli 中的 tsx 文件

我有一个 .tsx 文件并通过以下方式将其导入到 ts 文件中

import {ReactChildComponentView} from "./MessageBox";

但是当我运行 ngserve 时它会抛出错误

    ERROR in ./src/app/react/wrapper.component.ts
    Module not found: Error: Can't resolve './MessageBox' in '.../src/app/react'

在 Chrome 控制台中我可以看到以下错误

using description file: .../package.json (relative path: ./src/app/react/MessageBox)
  as directory
    .../src/app/react/MessageBox doesn't exist
  no extension
    .../src/app/react/MessageBox doesn't exist
  .ts
    .../src/app/react/MessageBox.ts doesn't exist
  .js
    .../src/app/react/MessageBox.js doesn't exist

似乎 Angular 不查找 .tsx 文件。我怎样才能改变这一点？

首先你需要确保你已经配置好了webpack查找文件.tsx通过添加扩展.tsx in resolve.extensions在你的 webpack 配置中：

resolve: {
    extensions: [
        '.js',
        '.ts',
        '.tsx'
    ]
}

然后，您需要通过设置将打字稿加载器配置为查找 .tsx 文件test: /\.tsx$/ for ts装载机module.loaders在 webpack 配置中：

module: {
    loaders: [
      {
        test: /\.tsx$/,
        exclude: /node_modules|typings/,
        loaders: [
          'ts'
        ]
      },
    // More loaders
   ]
}

您还可以在以下位置找到有关 webpack 和 React 集成的更多信息