fix(compiler): use chunk origin in template HMR request URL (#59459)

clydin · kirjs · commit a4164141a38e · 2025-01-09T18:21:48.000-05:00
The URL that is dynamically imported to fetch a potential component update for HMR is now based on the value of `import.meta.url`. This ensures that the request is sent to the same location that was used to retrieve the application code. For some development server setups the HTML base HREF may not be the location of the Angular development server. By using the application code location which was generated by the development server, HMR requests can continue to work as expected in these scenarios. In most common cases, this change will not have any effect as the HTML base HREF aligns with the location of the application code files. PR Close #59459
diff --git a/packages/compiler-cli/test/ngtsc/hmr_spec.ts b/packages/compiler-cli/test/ngtsc/hmr_spec.ts
@@ -106,7 +106,7 @@ runInEachFileSystem(() => {
       expect(jsContents).toContain(`import * as i0 from "@angular/core";`);
       expect(jsContents).toContain('function Cmp_HmrLoad(t) {');
       expect(jsContents).toContain(
-        'import(/* @vite-ignore */\n"/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t))',
+        'import(/* @vite-ignore */\nnew URL("/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t), import.meta.url).href)',
       );
       expect(jsContents).toContain(
         ').then(m => m.default && i0.ɵɵreplaceMetadata(Cmp, m.default, [i0], ' +
@@ -173,7 +173,7 @@ runInEachFileSystem(() => {
       expect(jsContents).toContain(`import * as i1 from "./dep";`);
       expect(jsContents).toContain('function Cmp_HmrLoad(t) {');
       expect(jsContents).toContain(
-        'import(/* @vite-ignore */\n"/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t))',
+        'import(/* @vite-ignore */\nnew URL("/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t), import.meta.url).href)',
       );
       expect(jsContents).toContain(
         ').then(m => m.default && i0.ɵɵreplaceMetadata(Cmp, m.default, [i0, i1], ' +
diff --git a/packages/compiler/src/render3/r3_hmr_compiler.ts b/packages/compiler/src/render3/r3_hmr_compiler.ts
@@ -80,8 +80,14 @@ export function compileHmrInitializer(meta: R3HmrMetadata): o.Expression {
     .literal(urlPartial)
     .plus(o.variable('encodeURIComponent').callFn([o.variable(timestampName)]));
 
+  // import.meta.url
+  const urlBase = o.variable('import').prop('meta').prop('url');
+
+  // new URL(urlValue, urlBase).href
+  const urlHref = new o.InstantiateExpr(o.variable('URL'), [urlValue, urlBase]).prop('href');
+
   // function Cmp_HmrLoad(t) {
-  //   import(/* @vite-ignore */ url).then((m) => m.default && replaceMetadata(...));
+  //   import(/* @vite-ignore */ urlHref).then((m) => m.default && replaceMetadata(...));
   // }
   const importCallback = new o.DeclareFunctionStmt(
     importCallbackName,
@@ -90,7 +96,7 @@ export function compileHmrInitializer(meta: R3HmrMetadata): o.Expression {
       // The vite-ignore special comment is required to prevent Vite from generating a superfluous
       // warning for each usage within the development code. If Vite provides a method to
       // programmatically avoid this warning in the future, this added comment can be removed here.
-      new o.DynamicImportExpr(urlValue, null, '@vite-ignore')
+      new o.DynamicImportExpr(urlHref, null, '@vite-ignore')
         .prop('then')
         .callFn([replaceCallback])
         .toStmt(),
