fix(angular): mf generators failed with directory

packages/angular/src/generators/application/lib/normalize-options.ts

@@ -10,21 +10,18 @@ import type { NormalizedSchema } from './normalized-schema';
 import { names, getWorkspaceLayout } from '@nrwl/devkit';
 import { E2eTestRunner, UnitTestRunner } from '../../../utils/test-runners';
 import { Linter } from '@nrwl/linter';
+import { normalizeDirectory, normalizeProjectName } from '../../utils/project';
 
 export function normalizeOptions(
   host: Tree,
   options: Partial<Schema>
 ): NormalizedSchema {
   const { appsDir, npmScope, standaloneAsDefault } = getWorkspaceLayout(host);
 
-  const appDirectory = options.directory
-    ? `${names(options.directory).fileName}/${names(options.name).fileName}`
-    : names(options.name).fileName;
+  const appDirectory = normalizeDirectory(options.name, options.directory);
 
   let e2eProjectName = `${names(options.name).fileName}-e2e`;
-  const appProjectName = appDirectory
-    .replace(new RegExp('/', 'g'), '-')
-    .replace(/-\d+/g, '');
+  const appProjectName = normalizeProjectName(options.name, options.directory);
   if (options.e2eTestRunner !== 'cypress') {
     e2eProjectName = `${appProjectName}-e2e`;
   }

packages/angular/src/generators/host/host.spec.ts

@@ -82,4 +82,27 @@ describe('Host App Generator', () => {
       tree.read('apps/host-app/module-federation.config.js', 'utf-8')
     ).toContain(`'remote1','remote2','remote3'`);
   });
+
+  it('should generate a host, integrate existing remotes and generate any remotes that dont exist, in a directory', async () => {
+    // ARRANGE
+    const tree = createTreeWithEmptyWorkspace(2);
+    await remote(tree, {
+      name: 'remote1',
+    });
+
+    // ACT
+    await host(tree, {
+      name: 'hostApp',
+      directory: 'foo',
+      remotes: ['remote1', 'remote2', 'remote3'],
+    });
+
+    // ASSERT
+    expect(tree.exists('apps/remote1/project.json')).toBeTruthy();
+    expect(tree.exists('apps/foo/remote2/project.json')).toBeTruthy();
+    expect(tree.exists('apps/foo/remote3/project.json')).toBeTruthy();
+    expect(
+      tree.read('apps/foo/host-app/module-federation.config.js', 'utf-8')
+    ).toContain(`'remote1','foo-remote2','foo-remote3'`);
+  });
 });

packages/angular/src/generators/host/host.ts

@@ -4,6 +4,7 @@ import type { Schema } from './schema';
 import { getProjects } from '@nrwl/devkit';
 import applicationGenerator from '../application/application';
 import remoteGenerator from '../remote/remote';
+import { normalizeProjectName } from '../utils/project';
 
 export default async function host(tree: Tree, options: Schema) {
   const projects = getProjects(tree);
@@ -36,7 +37,7 @@ export default async function host(tree: Tree, options: Schema) {
     await remoteGenerator(tree, {
       ...options,
       name: remote,
-      host: names(options.name).fileName,
+      host: normalizeProjectName(options.name, options.directory),
       skipFormat: true,
     });
   }

packages/angular/src/generators/remote/remote.ts

@@ -3,6 +3,7 @@ import type { Schema } from './schema';
 import { getProjects, readProjectConfiguration } from '@nrwl/devkit';
 import applicationGenerator from '../application/application';
 import { getMFProjects } from '../../utils/get-mf-projects';
+import { normalizeProjectName } from '../utils/project';
 
 function findNextAvailablePort(tree: Tree) {
   const mfeProjects = getMFProjects(tree);
@@ -42,7 +43,8 @@ export default async function remote(tree: Tree, options: Schema) {
 }
 
 function removeDeadCode(tree: Tree, options: Schema) {
-  const project = readProjectConfiguration(tree, options.name);
+  const projectName = normalizeProjectName(options.name, options.directory);
+  const project = readProjectConfiguration(tree, projectName);
 
   ['css', 'less', 'scss', 'sass'].forEach((style) => {
     const pathToComponentStyle = joinPathFragments(

packages/angular/src/generators/utils/project.ts

@@ -0,0 +1,13 @@
+import { names } from '@nrwl/devkit';
+
+export function normalizeDirectory(appName: string, directoryName: string) {
+  return directoryName
+    ? `${names(directoryName).fileName}/${names(appName).fileName}`
+    : names(appName).fileName;
+}
+
+export function normalizeProjectName(appName: string, directoryName: string) {
+  return normalizeDirectory(appName, directoryName)
+    .replace(new RegExp('/', 'g'), '-')
+    .replace(/-\d+/g, '');
+}