Skip to content

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

@majo44

Description

@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 angular/angular#19691 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentfeatureLabel used to distinguish feature request from other issues

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions