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

debugcn 发表于 Dev

菲利克斯·容汉斯

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

import {ReactChildComponentView} from "./MessageBox";

但是当我运行ng服务时会引发错误

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

伊戈尔·B

首先，你需要确保你已经配置的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的更多信息并作出反应集成

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。