Bug(ngtools/webpack): elideImports transformer mistakenly treat jsxFactory as unused import

[trotyl]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version
v11.2.0

npm --version
6.5.0

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 11.2.0
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Repro steps

Say that current jsxFactory being set to createElement, given an Angular .tsx file, like:

import { Component } from '@angular/core';
import { createElement } from './render';

console.log(<p>123</p>);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-tmp-c';
}

When building with AOT, the AngularCompilerPlugin would apply removeDecorators transformer to the build process.

As this Angular file contains some decorator (@Component() here), removeDecorators is activated and uses elideImports transformer to remove unused decorator imports.

Inside that elideImports transformer, it records "all" the used imports, but it doesn't deal with jsx node properly as not transformed yet, so that jsxFactory is not an identifier and not being recorded.

Then the import being removed and results to a broken file:

// createElement becomes global variable here
console.log(createElement("p", null, "123"));
var AppComponent = /** @class */ (function () {
    function AppComponent() {
        this.title = 'ng-tmp-c';
    }
    return AppComponent;
}());

The log given by the failure

N/A

Desired functionality

Support .tsx in AOT like what in JIT.

Mention any other details that might be useful

Suggested labels: type: bug/fix, effort1: easy, freq1: low, severity3: broken, workaround2: non-obvious.

[santoshyadavdev]

Hi Team,
I am taking this up, may need some help as first time contributor here.

[angular-automatic-lock-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.}