fix(compiler-cli): ensure HMR works with different output module type (angular#60797)

Currently when we transpile the HMR update module, we use the project's compiler options verbatim. This appears to break down with some module types, whereas we have to use a native export.

These changes override the compiler options to ensure that the user's options don't end up breaking HMR.

Fixes angular#60795.

PR Close angular#60797

Author: crisbeto

packages/compiler-cli/src/ngtsc/core/src/compiler.ts

@@ -966,7 +966,15 @@ export class NgCompiler {
     const nodeText = printer.printNode(ts.EmitHint.Unspecified, callback, sourceFile);
 
     return ts.transpileModule(nodeText, {
-      compilerOptions: this.options,
+      compilerOptions: {
+        ...this.options,
+
+        // Some module types can produce additional code (see #60795) whereas we need the
+        // HMR update module to use a native `export`. Override the `target` and `module`
+        // to ensure that it looks as expected.
+        module: ts.ModuleKind.ES2022,
+        target: ts.ScriptTarget.ES2022,
+      } as ts.CompilerOptions,
       fileName: sourceFile.fileName,
       reportDiagnostics: false,
     }).outputText;

packages/compiler-cli/test/ngtsc/hmr_spec.ts

@@ -24,14 +24,18 @@ runInEachFileSystem(() => {
       env.tsconfig();
     });
 
-    function enableHmr(additionalOptions: Record<string, unknown> = {}): void {
+    function enableHmr(
+      additionalAngularOptions: Record<string, unknown> = {},
+      additionalCompilerOptions: Record<string, unknown> = {},
+    ): void {
       env.write(
         'tsconfig.json',
         JSON.stringify({
           extends: './tsconfig-base.json',
+          ...additionalCompilerOptions,
           angularCompilerOptions: {
             _enableHmr: true,
-            ...additionalOptions,
+            ...additionalAngularOptions,
           },
         }),
       );
@@ -973,5 +977,31 @@ runInEachFileSystem(() => {
       expect(jsContents).toContain('newProp = 123');
       expect(hmrContents).toContain('export default function Cmp_UpdateMetadata');
     });
+
+    it('should generate an HMR initializer and update function for a class that depends on multiple namespaces', () => {
+      enableHmr(undefined, {
+        compilerOptions: {
+          module: 'NodeNext',
+          moduleResolution: 'NodeNext',
+        },
+      });
+
+      env.write(
+        'test.ts',
+        `
+          import {Component} from '@angular/core';
+
+          @Component({selector: 'cmp', template: ''})
+          export class Cmp {}
+        `,
+      );
+
+      env.driveMain();
+
+      const hmrContents = env.driveHmr('test.ts', 'Cmp');
+      expect(hmrContents).toContain(
+        'export default function Cmp_UpdateMetadata(Cmp, ɵɵnamespaces, Component) {',
+      );
+    });
   });
 });