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

Question

我有一个 .tsx 文件并通过 将其导入 ts 文件

import {ReactChildComponentView} from "./MessageBox";

但是当我运行 ng serve 时它抛出一个错误

    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 文件。我该如何改变它？

Answer 1

首先，您需要确保已配置 webpack 以通过在 中添加 .tsx 来查找扩展名为 .tsx 的文件resolve.extensions 在你的 webpack 配置中:

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

然后您需要配置 typescript 加载器以通过在 module 中为 ts 加载器设置 test:/\.tsx$/ 来查找 .tsx 文件。 webpack 配置中的加载器:

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

您还可以在 Typescript Handbook 找到有关 webpack 和 React 集成的更多信息