ZephyrCloudIO · Nsttt · May 4, 2026 · May 4, 2026 · May 4, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,15 +12,15 @@
         min-height: 100%;
       }
 
-      app-root {
+      app-promo-card {
         display: block;
         min-height: 100vh;
         padding: 24px;
       }
     </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
@@ -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
@@ -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
@@ -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',

diff --git 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": {