How can I resolve tsx file in Angular 2 / Angular - Cli

Question

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

import {ReactChildComponentView} from "./MessageBox";

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'

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

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

Igor B · Accepted Answer · 2017-01-28 12:49:20Z

5

+50

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'
    ]
}

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
   ]
}

Also you can find more info about webpack and react integration at Typescript Handbook

answered Jan 28, 2017 at 12:49

Igor B

91411 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Simpson Over a year ago

I had to make some changes in Webpack 5.5.1: Under the module.rules node I modified an existing loader and had it use the @ngtools/webpack loader that ts uses: { "test": /\.tsx?$/, "loader": "@ngtools/webpack" }, Additionally, you might need to modify your tsconfig.json to include ` "jsx" : "react"` under the compilerOptions

Prasad Kudalkar Over a year ago

It's giving me an error saying 'Unexpected token You may need an appropriate loader to handle this file type.'

Collectives™ on Stack Overflow

How can I resolve tsx file in Angular 2 / Angular - Cli

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related