From 66d1aedf08ab5eda4abaab47e3388c2fa13e392a Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Tue, 27 Sep 2022 10:21:29 +0100
Subject: [PATCH] fix(angular): fix root selector in index.html for standalone
 remotes (#12255)

---
 .../src/generators/remote/remote.spec.ts      | 19 +++++++++++++++++++
 .../angular/src/generators/remote/remote.ts   | 15 +++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/packages/angular/src/generators/remote/remote.spec.ts b/packages/angular/src/generators/remote/remote.spec.ts
index 4ebddc572b2bc..73c1abd87f840 100644
--- a/packages/angular/src/generators/remote/remote.spec.ts
+++ b/packages/angular/src/generators/remote/remote.spec.ts
@@ -149,4 +149,23 @@ describe('MF Remote App Generator', () => {
     const projects = getProjects(tree);
     expect(projects.has('remote1-e2e')).toBeFalsy();
   });
+
+  it('should update the index.html to use the remote entry component selector for root when standalone', async () => {
+    // ARRANGE
+    const tree = createTreeWithEmptyWorkspace();
+
+    // ACT
+    await remote(tree, {
+      name: 'test',
+      standalone: true,
+    });
+
+    // ASSERT
+    expect(tree.read('apps/test/src/index.html', 'utf-8')).not.toContain(
+      'proj-root'
+    );
+    expect(tree.read('apps/test/src/index.html', 'utf-8')).toContain(
+      'proj-test-entry'
+    );
+  });
 });
diff --git a/packages/angular/src/generators/remote/remote.ts b/packages/angular/src/generators/remote/remote.ts
index 0b2a6da7b8f19..e532722a0f9a0 100644
--- a/packages/angular/src/generators/remote/remote.ts
+++ b/packages/angular/src/generators/remote/remote.ts
@@ -3,6 +3,7 @@ import {
   getProjects,
   joinPathFragments,
   readProjectConfiguration,
+  readWorkspaceConfiguration,
   Tree,
 } from '@nrwl/devkit';
 import type { Schema } from './schema';
@@ -132,5 +133,19 @@ export class AppModule {}`
     );
   } else {
     tree.delete(pathToAppComponent);
+
+    const prefix = options.prefix ?? readWorkspaceConfiguration(tree).npmScope;
+    const remoteEntrySelector = `${prefix}-${projectName}-entry`;
+
+    const pathToIndexHtml = project.targets.build.options.index;
+    const indexContents = tree.read(pathToIndexHtml, 'utf-8');
+
+    const rootSelectorRegex = new RegExp(`${prefix}-root`, 'ig');
+    const newIndexContents = indexContents.replace(
+      rootSelectorRegex,
+      remoteEntrySelector
+    );
+
+    tree.write(pathToIndexHtml, newIndexContents);
   }
 }