Question

我有一个.tsx文件，并通过

将其导入ts文件

import {ReactChildComponentView} from "./MessageBox";

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

    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

看起来好像没有找到.tsx文件。我怎么能改变它？

Answer 1

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

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

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

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

您还可以在Typescript Handbook

找到有关webpack的更多信息并做出反应

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

1 个答案: