如何在 Angular 2/Angular - Cli 中解析 tsx 文件 [英] How can I resolve tsx file in Angular 2 / Angular - Cli

问题描述

我有一个 .tsx 文件并通过

I have a .tsx file and import it in a ts file via

import {ReactChildComponentView} from "./MessageBox";

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

but when I run ng serve it throws an error

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

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

In Chrome console I can see the following Error

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 文件.我该如何改变?

it seems like angular doesn't look for .tsx files. How can I change that?

推荐答案

首先你需要确保你已经配置了 webpack 来查找带有 .tsx 扩展名的文件在 webpack 配置中的 resolve.extensions 中添加 .tsx:

First you need to make sure you have configured webpack to look for files with .tsx extension by adding .tsx in resolve.extensions in your webpack config:

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

然后，您需要通过在 模块中为 ts 加载器设置 test:/\.tsx$/ 来配置打字稿加载器以查找 .tsx 文件.webpack 配置中的加载程序:

Then you need to have typescript loader configured to look for .tsx files by setting test: /\.tsx$/ for ts loader in module.loaders in webpack config:

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

您还可以在 打字稿手册

这篇关于如何在 Angular 2/Angular - Cli 中解析 tsx 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！