fix(compiler): update @ng/component URL to be relative (#59620)

alan-agius4 · pkozlowski-opensource · commit 8dcd88998700 · 2025-01-20T09:10:13.000+01:00
This change is required to resolve angular/angular-cli#29248 and works in conjunction with angular/angular-cli#29386. It ensures that HMR (Hot Module Replacement) functions correctly with `base href`, proxies, and other advanced development setups. PR Close #59620
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 */\nnew URL("/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t), import.meta.url).href)',
+        '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 */\nnew URL("/@ng/component?c=test.ts%40Cmp&t=" + encodeURIComponent(t), import.meta.url).href)',
+        '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
@@ -54,7 +54,7 @@ export interface R3HmrNamespaceDependency {
  */
 export function compileHmrInitializer(meta: R3HmrMetadata): o.Expression {
   const id = encodeURIComponent(`${meta.filePath}@${meta.className}`);
-  const urlPartial = `/@ng/component?c=${id}&t=`;
+  const urlPartial = `./@ng/component?c=${id}&t=`;
   const moduleName = 'm';
   const dataName = 'd';
   const timestampName = 't';
