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

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

Author: clydin

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], ' +

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(),