fix(angular): update remote entry component selector to use the provided prefix (#10561)

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 {}"
+`;

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 {}

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';
+import { CommonModule } from '@angular/common';<% if(routing) { %>
-<% if(routing) { %>import { RouterModule } from '@angular/router';<% } %>
+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,
+    CommonModule,<% if(routing) { %>
-    <% if(routing) { %>RouterModule.forChild([
+    RouterModule.forChild([
       {
         path: '',
         component: RemoteEntryComponent,

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, {