Description
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.