From edea01aee6aaff84b69db113c3b99ef21d5acf33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?=
 <leosvel.perez.espinosa@gmail.com>
Date: Thu, 2 Jun 2022 17:23:54 +0100
Subject: [PATCH] fix(angular): update remote entry component selector to use
 the provided prefix (#10561)

---
 .../__snapshots__/setup-mfe.spec.ts.snap      | 40 +++++++++++++++++++
 .../entry.component.ts__tmpl__                |  6 ++-
 .../entry.module.ts__tmpl__                   |  8 ++--
 .../generators/setup-mfe/setup-mfe.spec.ts    | 27 +++++++++++++
 4 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
index dc391aa4c798d..d2e23c1f8c258 100644
--- a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
+++ b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
@@ -108,3 +108,43 @@ exports[`Init MFE should create webpack and mfe configs correctly 4`] = `
   },
 }"
 `;
+
+exports[`Init MFE should generate the remote entry component correctly when prefix is not provided 1`] = `
+"import { Component } from '@angular/core';
+
+@Component({
+  selector: 'remote1-entry',
+  template: \`nx-welcome></nx-welcome>\`
+})
+export class RemoteEntryComponent {}
+"
+`;
+
+exports[`Init MFE should generate the remote entry module and component correctly 1`] = `
+"import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-org-remote1-entry',
+  template: \`<my-org-nx-welcome></my-org-nx-welcome>\`
+})
+export class RemoteEntryComponent {}
+"
+`;
+
+exports[`Init MFE should generate the remote entry module and component correctly 2`] = `
+"import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { RemoteEntryComponent } from './entry.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
+
+@NgModule({
+  declarations: [RemoteEntryComponent, NxWelcomeComponent],
+  imports: [
+    CommonModule,
+  ],
+  providers: [],
+  exports: [RemoteEntryComponent],
+})
+export class RemoteEntryModule {}"
+`;
diff --git a/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.component.ts__tmpl__ b/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.component.ts__tmpl__
index 888291adeab87..427544c0fd967 100644
--- a/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.component.ts__tmpl__
+++ b/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.component.ts__tmpl__
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 
-@Component({
+@Component({<% if (prefix) { %>
+  selector: '<%= prefix %>-<%= appName %>-entry',
+  template: `<<%= prefix %>-nx-welcome></<%= prefix %>-nx-welcome>`<% } else { %>
   selector: '<%= appName %>-entry',
-  template: `<<%= prefix %>-nx-welcome></<%= prefix %>-nx-welcome>`
+  template: `nx-welcome></nx-welcome>`<% } %>
 })
 export class RemoteEntryComponent {}
diff --git a/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.module.ts__tmpl__ b/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.module.ts__tmpl__
index ac5775bdc3547..b7c219ea7d507 100644
--- a/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.module.ts__tmpl__
+++ b/packages/angular/src/generators/setup-mfe/files/entry-module-files/entry.module.ts__tmpl__
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-<% if(routing) { %>import { RouterModule } from '@angular/router';<% } %>
+import { CommonModule } from '@angular/common';<% if(routing) { %>
+import { RouterModule } from '@angular/router';<% } %>
 
 import { RemoteEntryComponent } from './entry.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
@@ -8,8 +8,8 @@ import { NxWelcomeComponent } from './nx-welcome.component';
 @NgModule({
   declarations: [RemoteEntryComponent, NxWelcomeComponent],
   imports: [
-    CommonModule,
-    <% if(routing) { %>RouterModule.forChild([
+    CommonModule,<% if(routing) { %>
+    RouterModule.forChild([
       {
         path: '',
         component: RemoteEntryComponent,
diff --git a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
index 28e2bdd570e53..9cc579a7ab29f 100644
--- a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
+++ b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
@@ -131,6 +131,33 @@ describe('Init MFE', () => {
     }
   );
 
+  it('should generate the remote entry module and component correctly', async () => {
+    // ACT
+    await setupMfe(tree, {
+      appName: 'remote1',
+      mfeType: 'remote',
+      prefix: 'my-org',
+    });
+
+    // ASSERT
+    expect(
+      tree.read('apps/remote1/src/app/remote-entry/entry.component.ts', 'utf-8')
+    ).toMatchSnapshot();
+    expect(
+      tree.read('apps/remote1/src/app/remote-entry/entry.module.ts', 'utf-8')
+    ).toMatchSnapshot();
+  });
+
+  it('should generate the remote entry component correctly when prefix is not provided', async () => {
+    // ACT
+    await setupMfe(tree, { appName: 'remote1', mfeType: 'remote' });
+
+    // ASSERT
+    expect(
+      tree.read('apps/remote1/src/app/remote-entry/entry.component.ts', 'utf-8')
+    ).toMatchSnapshot();
+  });
+
   it('should add the remote config to the host when --remotes flag supplied', async () => {
     // ACT
     await setupMfe(tree, {