Repository navigation
Bug(ngtools/webpack): elideImports transformer mistakenly treat jsxFactory as unused import #13297
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.
Activity
santoshyadavdev commentedon Apr 9, 2019
Hi Team,
I am taking this up, may need some help as first time contributor here.
angular-automatic-lock-bot commentedon Dec 6, 2020
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.