如何解決在角2/TSX角文件 - CLI

我有一個.tsx文件並通過如何解決在角2/TSX角文件 - CLI

import {ReactChildComponentView} from "./MessageBox";

在TS文件導入，但是當我運行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

好像角度不找.tsx文件。我該如何改變它？

來源

2017-01-22 Felix Junghans

首先，你需要在你的WebPack配置中添加resolve.extensions.tsx，以確保你已經配置的WebPack查找文件與.tsx擴展：

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

然後，你需要有打字稿裝載機配置爲通過設置test: /\.tsx$/爲ts加載程序尋找.tsx文件module.loaders in webpack config：

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

您也可以找到有關的WebPack的詳細信息，並在Typescript Handbook

來源

2017-01-28 12:49:20

反應整合，我不得不做出的WebPack 5.5.1一些變化：在我修改了現有裝載機的module.rules節點，把它使用' @ ngtools/webpack'裝載機TS用途： { 「測試」：/\.tsx?$/，「裝載機」：「@ ngtools /的WebPack」 }，此外，可能需要修改tsconfig.json在'compilerOptions'下包含''jsx「：」react「' –

它給我一個錯誤，說'意外的標記你可能需要一個合適的加載器來處理t他的文件類型。「 –

如何解決在角2/TSX角文件 - CLI

回答

相關問題