Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cli build should support loading modules with *.tsx extension.

See original GitHub issue

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.

call ng new testproject
cd testproject
rename src\app\app.component.ts to src\app\app.component.tsx
add to tsconfig.json compilerOptions “jsx”: “react”, “jsxFactory”: “h”
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