fix(@ngtools/webpack): perform import eliding before TypeScript transforms

packages/ngtools/webpack/src/ivy/transformation.ts

@@ -25,7 +25,7 @@ export function createAotTransformers(
   const removeNgModuleScope = !options.emitNgModuleScope;
   if (removeClassMetadata || removeNgModuleScope) {
     // tslint:disable-next-line: no-non-null-assertion
-    transformers.after!.push(
+    transformers.before!.push(
       removeIvyJitSupportCalls(removeClassMetadata, removeNgModuleScope, getTypeChecker),
     );
   }

packages/ngtools/webpack/src/transformers/elide_imports.ts

@@ -118,6 +118,11 @@ export function elideImports(
   }
 
   const isUnused = (node: ts.Identifier) => {
+    // Do not remove JSX factory imports
+    if (node.text === compilerOptions.jsxFactory) {
+      return false;
+    }
+
     const symbol = typeChecker.getSymbolAtLocation(node);
 
     return symbol && !usedSymbols.has(symbol);

packages/ngtools/webpack/src/transformers/elide_imports_spec.ts

@@ -50,6 +50,9 @@ describe('@ngtools/webpack transformers', () => {
           [propName: string]: unknown;
         }
       `,
+      'jsx.ts': `
+        export function createElement() {}
+      `,
     };
 
     it('should remove unused imports', () => {
@@ -348,6 +351,47 @@ describe('@ngtools/webpack transformers', () => {
       });
     });
 
+    it('keeps jsxFactory imports when configured', () => {
+      const extraCompilerOptions: ts.CompilerOptions = {
+        jsxFactory: 'createElement',
+        experimentalDecorators: true,
+        jsx: ts.JsxEmit.React,
+      };
+
+      const input = tags.stripIndent`
+        import { Decorator } from './decorator';
+        import { Service } from './service';
+        import { createElement } from './jsx';
+
+        const test = <p>123</p>;
+
+        @Decorator()
+        export class Foo {
+          constructor(param: Service) {
+          }
+        }
+
+        ${dummyNode}
+      `;
+
+      const output = tags.stripIndent`
+        import { __decorate } from "tslib";
+        import { Decorator } from './decorator';
+        import { createElement } from './jsx';
+
+        const test = createElement("p", null, "123");
+
+        let Foo = class Foo { constructor(param) { } };
+        Foo = __decorate([ Decorator() ], Foo);
+        export { Foo };
+      `;
+
+      const { program, compilerHost } = createTypescriptContext(input, additionalFiles, true, extraCompilerOptions, true);
+      const result = transformTypescript(undefined, [transformer(program)], program, compilerHost);
+
+      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
+    });
+
     describe('should not elide imports decorator type references when emitDecoratorMetadata is true', () => {
       const extraCompilerOptions: ts.CompilerOptions = {
          emitDecoratorMetadata: true,

packages/ngtools/webpack/src/transformers/spec_helpers.ts

@@ -14,7 +14,7 @@ import { WebpackCompilerHost } from '../compiler_host';
 
 // Test transform helpers.
 const basePath = '/project/src/';
-const fileName = basePath + 'test-file.ts';
+const basefileName = basePath + 'test-file.ts';
 const typeScriptLibFiles = loadTypeScriptLibFiles();
 const tsLibFiles = loadTsLibFiles();
 
@@ -23,7 +23,9 @@ export function createTypescriptContext(
   additionalFiles?: Record<string, string>,
   useLibs = false,
   extraCompilerOptions: ts.CompilerOptions = {},
+  jsxFile = false,
 ) {
+  const fileName = basefileName + (jsxFile ? 'x' : '');
   // Set compiler options.
   const compilerOptions: ts.CompilerOptions = {
     noEmitOnError: useLibs,
@@ -107,7 +109,7 @@ export function transformTypescript(
   }
 
   // Return the transpiled js.
-  return compilerHost.readFile(fileName.replace(/\.tsx?$/, '.js'));
+  return compilerHost.readFile(basefileName.replace(/\.tsx?$/, '.js'));
 }
 
 function loadTypeScriptLibFiles(): Record<string, string> {