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

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

看起来像angular不会找.tsx文件.我怎么能改变呢？

Answer 1

首先,你需要确保你已经配置的WebPack寻找与文件.tsx通过添加扩展.tsx在resolve.extensions你的WebPack配置:

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

然后,你需要有打字稿装载机配置设置来寻找.tsx文件test: /\.tsx$/的ts装载机module.loaders在配置的WebPack:

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

您还可以在Typescript手册中找到有关webpack和反应集成的更多信息