Angular-cli: Cli build should support loading modules with *.tsx extension.

[majo44]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

Angular CLI: 1.5.0-rc.0
Node: 6.11.0
OS: win32 x64
Angular: 5.0.0-rc.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.5.0-rc.0
@angular-devkit/build-optimizer: 0.0.27
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.33
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.0
@schematics/angular: 0.0.45
typescript: 2.5.3
webpack: 3.7.1

Repro steps.

1. call ng new testproject
2. cd testproject
3. rename src\app\app.component.ts to src\app\app.component.tsx
4. add to tsconfig.json compilerOptions
   "jsx": "react",
   "jsxFactory": "h"
5. call ng build

The log given by the failure.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve './app.component' in 'c:\temp\testproject\src\app'
resolve './app.component' in 'c:\temp\testproject\src\app'
  using description file: c:\temp\testproject\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: c:\temp\testproject\package.json (relative path: ./src/app)
    using description file: c:\temp\testproject\package.json (relative path: ./src/app/app.component)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        c:\temp\testproject\src\app\app.component doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        c:\temp\testproject\src\app\app.component.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        c:\temp\testproject\src\app\app.component.js doesn't exist
      as directory
        c:\temp\testproject\src\app\app.component doesn't exist
[c:\temp\testproject\src\app\app.component]
[c:\temp\testproject\src\app\app.component.ts]
[c:\temp\testproject\src\app\app.component.js]
[c:\temp\testproject\src\app\app.component]
 @ ./src/app/app.module.ts 9:0-47
 @ ./src/main.ts
 @ multi ./src/main.ts

Desired functionality.

The tsx is providing just extended syntax sugar, which can be used for different porpoises. In my case I'm using mono-repo approach and I'm delivering part of components as web-components where I'm using jsx/tsx.
For compiler there should not be difference in extension of module.

Ropen of https://github.com/angular/angular/issues/19691#issuecomment-336222081

[filipesilva]

Discussed offline, we should support .tsx. Will make as a feature request to be worked on.

[majo44]

Any chance to got this in 1.5.0 ?

[rsxdalv]

What work is left to pull this PR?

[mcharmas]

Is there any workaround this issue?

[majo44]

UGLY workaround: https://gist.github.com/majo44/4862b8e7db6254975669e0a3f9d67a2a#file-angular-cli-1-5-0-tsx-loading-ugly-fix (we have this in postinstall)

We are working on PR.

[mcharmas]

@majo44 thx, I guess it's better solution then ejecting to webpack

[urish]

@majo44 any news regarding the PR ?

[majo44]

@urish unfortunately we are not actively working on PR, so far we stick with workaround and old version of cli :(

[urish]

The workaround also works with the latest CLI (tested last night), however
I'd love to see this integrated into the CLI...

On Feb 9, 2018 11:50 AM, "majo44" [e-mail] wrote:

@urish https://github.com/urish unfortunately we are not actively
working on PR, so far we stick with workaround and old version of cli :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/8046#issuecomment-364386547,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2dnhwMKvidy9Io7JXPh0VcpnPJT8Swks5tTBTSgaJpZM4P4oRF
.

[psamusev]

@urish It has stopped work with @angular/cli >= 1.7.0

[lygstate]

@majo44 PR thanks.

[lygstate]

@psamusev I am working fine with 1.7.3, so what's the problem you faced?

[psamusev]

@lygstate I'm talking about live reload with help of ng serve - server doesn't see changes and doesn't execute reload

[rsxdalv]

@psamusev It sees them one level deep (i.e myfile.ts ... import .. myotherfile.tsx ... myotherfile.ts ... import .. mythirdfile.tsx ..., only first and second will be seen)

[psamusev]

@rsxdalv I expect it shouldn't work in this way :)

[rsxdalv]

@psamusev Eyes open for your PR.

[psamusev]

workaround is to make import with .tsx at the end if import file name

import 'myTsxfile.tsx'

[sakalys]

@psamusev this does not work. Using your suggestion it errors out:

You may need an appropriate loader to handle this file type.

[psamusev]

@sakalys you have to import only with string path. I mean

import 'myImportfile.tsx

works, however

import { SomeComponent } from 'myImportfile.tsx'

will not work

[sakalys]

Oh, thank you, sir. I'll definitely check.

[zh99998]

@angular/cli 6.0.1 still can't use and the ugly fix not works any more

[rsxdalv]

@zh99998 Take advantage of versioning: downgrade. Very few updates have been worth their salt beyond reducing future upgrade pains. Later, you might be able to revert back to 6.0.1 when the fix is updated.

[urish]

Just sent a PR to make it work with the latest CLI (6.x). I'm using this in one of my projects successfully. Fingers crossed! 🤞

[psamusev]

@urish looks like your fix doesn't work when build is for server module (I create universal product)
I'm using:
"@angular-devkit/build-angular": "~0.7.0-beta.2", "@angular/cli": "~6.1.0-rc.0",

Error is following
Module parse failed: Unexpected token You may need an appropriate loader to handle this file type.

[rhalff]

I'm currently solving this issue in an extra build step for projects containing jsx:

import * as ngPackage from 'ng-packagr'

ngPackage
  .ngPackagr()
  .forProject(
     'projects/<angular-lib-project>'
  )
  .withTsConfig(
    'projects/<angular-lib-project>/tsconfig.lib.json'
  )
  .build()
  .catch(error => {
    console.error(error)
    process.exit(1)
  })

The file layout of the library can remain as is in this case.

You'll also have to add "jsx": true in your ng-package.json and set "jsx": "react|react-native|preserve" inside the typescript configuration file.

[ar53n]

How i can test *.spec.tsx files? Have anyone that problem?

[lacolaco]

I'm using ngx-build-plus to compile .tsx files
https://github.com/manfredsteyer/ngx-build-plus/

webpack.extra.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx'],
  }
};

I think ngcLoader should handle .tsx file as well as .ts by default

I wonder why this patch didn't fix it...

[davidenke]

Are there any updates on this? For us *.tsx support is working only on non-aot builds. Running ng serve --aot=true seams not to work.

Do you need a reproduction case?

[psamusev]

@davidenke There is a PR to fix it - https://github.com/angular/angular-cli/pull/11407

[davidenke]

@psamusev it's not reviewed yet, maybe because of the failed circle ci tests?

[psamusev]

@davidenke I think so.

[clydin]

Support has been merged and will be available in 7.0.

[jimthedev]

I have been unable to get this working at all. Is it documented anywhere so that I can confirm I am on the right versions of everything?

[ahpoi]

@jimthedev
I have managed to get it working, I had to upgrade to angular 7, and in the tsconfig for compiler option, you need to add `"jsx": "react".

[jimthedev]

@ahpoi This worked for me. It seems to be working pretty well.

[FRSgit]

For future travelers - when using jsx with stenciljs I needed to have these two config options in tsconfig.json:

  "jsx"        : "react",
  "jsxFactory" : "h"

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}