From 78038e5fce73d2574ce5c88fbffe2a0f70348b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Mon, 4 May 2026 15:38:33 +0200
Subject: [PATCH 1/2] fix: repair angular vite federation remote

---
 module-federation/angular-vite/README.md                  | 4 ++--
 module-federation/angular-vite/host/package.json          | 4 ++--
 module-federation/angular-vite/host/src/app.component.ts  | 4 ++--
 module-federation/angular-vite/host/src/remotes.d.ts      | 3 +--
 module-federation/angular-vite/host/vite.config.ts        | 8 ++++----
 module-federation/angular-vite/package.json               | 6 +++---
 module-federation/angular-vite/remote/index.html          | 4 ++--
 module-federation/angular-vite/remote/package.json        | 2 +-
 .../angular-vite/remote/src/promo-card.component.ts       | 2 +-
 module-federation/angular-vite/remote/vite.config.ts      | 2 +-
 10 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/module-federation/angular-vite/README.md b/module-federation/angular-vite/README.md
index 2f33db6..afce710 100644
--- a/module-federation/angular-vite/README.md
+++ b/module-federation/angular-vite/README.md
@@ -32,11 +32,11 @@ pnpm dev
 
 ## What's Inside
 
-- `remote/` exposes `PromoCardComponent` as `angular_remote/PromoCard`
+- `remote/` exposes `PromoCardComponent` as `angular_vite_remote/PromoCard`
 - `host/` imports the remote component at runtime and renders it with `NgComponentOutlet`
 - Both apps use Vite, standalone Angular components, zoneless change detection, and shared Module Federation config
 - Vite runs `@module-federation/vite` directly and `vite-plugin-zephyr` alongside it
-- The host declares `zephyr:dependencies` so Zephyr can resolve `angular_remote` during deployment
+- The host declares `zephyr:dependencies` so Zephyr can resolve `angular_vite_remote` during deployment
 
 ## Why Analog's Vite Plugin?
 
diff --git a/module-federation/angular-vite/host/package.json b/module-federation/angular-vite/host/package.json
index 100fe0d..89122ec 100644
--- a/module-federation/angular-vite/host/package.json
+++ b/module-federation/angular-vite/host/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "angular_host",
+  "name": "angular_vite_host",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -27,6 +27,6 @@
     "vite-plugin-zephyr": "1.0.3"
   },
   "zephyr:dependencies": {
-    "angular_remote": "workspace:*"
+    "angular_vite_remote": "workspace:*"
   }
 }
diff --git a/module-federation/angular-vite/host/src/app.component.ts b/module-federation/angular-vite/host/src/app.component.ts
index cb1ddf5..450062a 100644
--- a/module-federation/angular-vite/host/src/app.component.ts
+++ b/module-federation/angular-vite/host/src/app.component.ts
@@ -54,7 +54,7 @@ import { Component, signal, Type } from '@angular/core';
       <section class="remote-slot" aria-label="Federated remote component">
         <div class="section-heading">
           <h2>Remote loaded by the host</h2>
-          <p>The card is compiled and served by <code>angular_remote</code>.</p>
+          <p>The card is compiled and served by <code>angular_vite_remote</code>.</p>
         </div>
         @if (remoteComponent()) {
           <ng-container *ngComponentOutlet="remoteComponent()" />
@@ -403,7 +403,7 @@ export class AppComponent {
   }
 
   private async loadRemote(): Promise<void> {
-    const remote = await import('angular_remote/PromoCard');
+    const remote = await import('angular_vite_remote/PromoCard');
     this.remoteComponent.set(remote.PromoCardComponent);
   }
 }
diff --git a/module-federation/angular-vite/host/src/remotes.d.ts b/module-federation/angular-vite/host/src/remotes.d.ts
index 49a4506..b3002f2 100644
--- a/module-federation/angular-vite/host/src/remotes.d.ts
+++ b/module-federation/angular-vite/host/src/remotes.d.ts
@@ -1,6 +1,5 @@
-declare module 'angular_remote/PromoCard' {
+declare module 'angular_vite_remote/PromoCard' {
   import type { Type } from '@angular/core';
 
   export const PromoCardComponent: Type<unknown>;
 }
-
diff --git a/module-federation/angular-vite/host/vite.config.ts b/module-federation/angular-vite/host/vite.config.ts
index b5cc825..7331be2 100644
--- a/module-federation/angular-vite/host/vite.config.ts
+++ b/module-federation/angular-vite/host/vite.config.ts
@@ -4,14 +4,14 @@ import { defineConfig } from 'vite';
 import { withZephyr, type ModuleFederationOptions } from 'vite-plugin-zephyr';
 
 const mfConfig: ModuleFederationOptions = {
-  name: 'angular_host',
+  name: 'angular_vite_host',
   filename: 'remoteEntry.js',
   remotes: {
-    angular_remote: {
+    angular_vite_remote: {
       type: 'module',
-      name: 'angular_remote',
+      name: 'angular_vite_remote',
       entry: 'http://localhost:5174/remoteEntry.js',
-      entryGlobalName: 'angular_remote',
+      entryGlobalName: 'angular_vite_remote',
       shareScope: 'default',
     },
   },
diff --git a/module-federation/angular-vite/package.json b/module-federation/angular-vite/package.json
index d59cb24..3c74d70 100644
--- a/module-federation/angular-vite/package.json
+++ b/module-federation/angular-vite/package.json
@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "pnpm --parallel --filter angular_host --filter angular_remote dev",
+    "dev": "pnpm --parallel --filter angular_vite_host --filter angular_vite_remote dev",
     "build": "pnpm build-remote && pnpm build-host",
-    "build-host": "pnpm --filter angular_host build",
-    "build-remote": "pnpm --filter angular_remote build"
+    "build-host": "pnpm --filter angular_vite_host build",
+    "build-remote": "pnpm --filter angular_vite_remote build"
   },
   "devDependencies": {
     "@module-federation/vite": "1.15.1",
diff --git a/module-federation/angular-vite/remote/index.html b/module-federation/angular-vite/remote/index.html
index 0f555a7..7341f29 100644
--- a/module-federation/angular-vite/remote/index.html
+++ b/module-federation/angular-vite/remote/index.html
@@ -12,7 +12,7 @@
         min-height: 100%;
       }
 
-      app-root {
+      app-promo-card {
         display: block;
         min-height: 100vh;
         padding: 24px;
@@ -20,7 +20,7 @@
     </style>
   </head>
   <body>
-    <app-root></app-root>
+    <app-promo-card></app-promo-card>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/module-federation/angular-vite/remote/package.json b/module-federation/angular-vite/remote/package.json
index f8788fa..6f8ed90 100644
--- a/module-federation/angular-vite/remote/package.json
+++ b/module-federation/angular-vite/remote/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "angular_remote",
+  "name": "angular_vite_remote",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/module-federation/angular-vite/remote/src/promo-card.component.ts b/module-federation/angular-vite/remote/src/promo-card.component.ts
index 2dfb4c1..71c0da9 100644
--- a/module-federation/angular-vite/remote/src/promo-card.component.ts
+++ b/module-federation/angular-vite/remote/src/promo-card.component.ts
@@ -14,7 +14,7 @@ import { Component } from '@angular/core';
       <dl>
         <div>
           <dt>Remote</dt>
-          <dd>angular_remote</dd>
+          <dd>angular_vite_remote</dd>
         </div>
         <div>
           <dt>Expose</dt>
diff --git a/module-federation/angular-vite/remote/vite.config.ts b/module-federation/angular-vite/remote/vite.config.ts
index 1a8cc3e..614a47b 100644
--- a/module-federation/angular-vite/remote/vite.config.ts
+++ b/module-federation/angular-vite/remote/vite.config.ts
@@ -4,7 +4,7 @@ import { defineConfig } from 'vite';
 import { withZephyr, type ModuleFederationOptions } from 'vite-plugin-zephyr';
 
 const mfConfig: ModuleFederationOptions = {
-  name: 'angular_remote',
+  name: 'angular_vite_remote',
   filename: 'remoteEntry.js',
   exposes: {
     './PromoCard': './src/promo-card.component.ts',

From 85fccfad2a6482816e5c461432846ea6c42a7873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Mon, 4 May 2026 15:39:47 +0200
Subject: [PATCH 2/2] test: add angular vite federation validations

---
 scripts/src/tests/app-validations.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/scripts/src/tests/app-validations.ts b/scripts/src/tests/app-validations.ts
index 161d753..0294db9 100644
--- a/scripts/src/tests/app-validations.ts
+++ b/scripts/src/tests/app-validations.ts
@@ -79,6 +79,21 @@ export const APP_VALIDATIONS: Record<string, AppValidation> = {
   remote2: {
     uniqueText: ["Remote 2", "Module Federation"],
   },
+  "angular-vite-host": {
+    uniqueText: [
+      "Angular + Vite",
+      "Remote loaded by the host",
+      "Federated starter card",
+      "angular_vite_remote",
+    ],
+  },
+  "angular-vite-remote": {
+    uniqueText: [
+      "Federated starter card",
+      "angular_vite_remote",
+      "./PromoCard",
+    ],
+  },
 
   // Airbnb clone microfrontends
   "airbnb-react-host": {