cleanup(angular): host generator (#13324)

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

@@ -1,18 +1,8 @@
-import {
-  formatFiles,
-  generateFiles,
-  getProjects,
-  joinPathFragments,
-  names,
-  readProjectConfiguration,
-  Tree,
-} from '@nrwl/devkit';
+import { formatFiles, getProjects, Tree } from '@nrwl/devkit';
 import type { Schema } from './schema';
 import applicationGenerator from '../application/application';
 import remoteGenerator from '../remote/remote';
 import { normalizeProjectName } from '../utils/project';
-import * as ts from 'typescript';
-import { addRoute } from '../../utils/nx-devkit/route-utils';
 import { setupMf } from '../setup-mf/setup-mf';
 import { E2eTestRunner } from '../../utils/test-runners';
 
@@ -66,81 +56,11 @@ export async function host(tree: Tree, options: Schema) {
     });
   }
 
-  routeToNxWelcome(tree, options);
-
   if (!options.skipFormat) {
     await formatFiles(tree);
   }
 
   return installTask;
 }
 
-function routeToNxWelcome(tree: Tree, options: Schema) {
-  const { sourceRoot } = readProjectConfiguration(
-    tree,
-    normalizeProjectName(options.name, options.directory)
-  );
-
-  const remoteRoutes =
-    options.remotes && Array.isArray(options.remotes)
-      ? options.remotes.reduce(
-          (routes, remote) =>
-            `${routes}\n<li><a routerLink='${normalizeProjectName(
-              remote,
-              options.directory
-            )}'>${names(remote).className}</a></li>`,
-          ''
-        )
-      : '';
-
-  tree.write(
-    joinPathFragments(sourceRoot, 'app/app.component.html'),
-    `<ul class="remote-menu">
-<li><a routerLink='/'>Home</a></li>
-${remoteRoutes}
-</ul>
-<router-outlet></router-outlet>
-`
-  );
-
-  const pathToHostRootRoutingFile = joinPathFragments(
-    sourceRoot,
-    'app/app.routes.ts'
-  );
-
-  const hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
-
-  let sourceFile = ts.createSourceFile(
-    pathToHostRootRoutingFile,
-    hostRootRoutingFile,
-    ts.ScriptTarget.Latest,
-    true
-  );
-
-  addRoute(
-    tree,
-    pathToHostRootRoutingFile,
-    `{
-      path: '',
-      component: NxWelcomeComponent
-    }`
-  );
-
-  tree.write(
-    pathToHostRootRoutingFile,
-    `import { NxWelcomeComponent } from './nx-welcome.component';
-    ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`
-  );
-
-  generateFiles(
-    tree,
-    joinPathFragments(__dirname, 'files'),
-    joinPathFragments(sourceRoot, 'app'),
-    {
-      appName: normalizeProjectName(options.name, options.directory),
-      tmpl: '',
-    }
-  );
-}
-
 export default host;

packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap

@@ -10,7 +10,8 @@ exports[`Init MF --federationType=dynamic should create a host with the correct
 `;
 
 exports[`Init MF should add a remote application and add it to a specified host applications router config 1`] = `
-"import { Route } from '@angular/router';
+"import { NxWelcomeComponent } from './nx-welcome.component';
+    import { Route } from '@angular/router';
 
 export const appRoutes: Route[] = [
     {
@@ -20,7 +21,11 @@ export const appRoutes: Route[] = [
     {
     path: 'remote1',
     loadChildren: () => import('remote1/Module').then(m => m.RemoteEntryModule)
-    },"
+    },
+    {
+      path: '',
+      component: NxWelcomeComponent
+    }"
 `;
 
 exports[`Init MF should add a remote application and add it to a specified host applications webpack config that contains a remote application already 1`] = `
@@ -38,14 +43,19 @@ exports[`Init MF should add a remote application and add it to a specified host
 `;
 
 exports[`Init MF should add a remote to dynamic host correctly 1`] = `
-"import { Route } from '@angular/router';
+"import { NxWelcomeComponent } from './nx-welcome.component';
+    import { Route } from '@angular/router';
 import { loadRemoteModule } from '@nrwl/angular/mf';
 
 export const appRoutes: Route[] = [
     {
     path: 'remote1',
     loadChildren: () => loadRemoteModule('remote1', './Module').then(m => m.RemoteEntryModule)
-    },]"
+    },
+    {
+      path: '',
+      component: NxWelcomeComponent
+    },"
 `;
 
 exports[`Init MF should create webpack and mf configs correctly 1`] = `

packages/angular/src/generators/setup-mf/lib/add-remote-entry.ts

@@ -12,50 +12,48 @@ export function addRemoteEntry(
   { appName, routing, mfType, prefix, standalone }: Schema,
   appRoot: string
 ) {
-  if (mfType === 'remote') {
-    prefix = prefix ?? readWorkspaceConfiguration(tree).npmScope;
-    generateFiles(
+  prefix = prefix ?? readWorkspaceConfiguration(tree).npmScope;
+  generateFiles(
+    tree,
+    standalone
+      ? joinPathFragments(
+          __dirname,
+          '../files/standalone-entry-component-files'
+        )
+      : joinPathFragments(__dirname, '../files/entry-module-files'),
+    `${appRoot}/src/app/remote-entry`,
+    {
+      tmpl: '',
+      appName,
+      routing,
+      prefix,
+    }
+  );
+
+  if (standalone && routing) {
+    addRoute(
       tree,
-      standalone
-        ? joinPathFragments(
-            __dirname,
-            '../files/standalone-entry-component-files'
-          )
-        : joinPathFragments(__dirname, '../files/entry-module-files'),
-      `${appRoot}/src/app/remote-entry`,
-      {
-        tmpl: '',
-        appName,
-        routing,
-        prefix,
-      }
+      joinPathFragments(appRoot, 'src/app/app.routes.ts'),
+      `{path: '', loadChildren: () => import('./remote-entry/entry.routes').then(m => m.remoteRoutes)}`
     );
-
-    if (standalone && routing) {
+  } else {
+    if (routing) {
       addRoute(
         tree,
         joinPathFragments(appRoot, 'src/app/app.routes.ts'),
-        `{path: '', loadChildren: () => import('./remote-entry/entry.routes').then(m => m.remoteRoutes)}`
+        `{path: '', loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)}`
       );
-    } else {
-      if (routing) {
-        addRoute(
-          tree,
-          joinPathFragments(appRoot, 'src/app/app.routes.ts'),
-          `{path: '', loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)}`
-        );
-      }
+    }
 
-      tree.write(
-        `${appRoot}/src/app/app.module.ts`,
-        `/* 
+    tree.write(
+      `${appRoot}/src/app/app.module.ts`,
+      `/* 
       * This RemoteEntryModule is imported here to allow TS to find the Module during 
       * compilation, allowing it to be included in the built bundle. This is required 
       * for the Module Federation Plugin to expose the Module correctly.
       * */
       import { RemoteEntryModule } from './remote-entry/entry.module';
 ${tree.read(`${appRoot}/src/app/app.module.ts`, 'utf-8')}`
-      );
-    }
+    );
   }
 }

packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts

@@ -23,7 +23,7 @@ export function checkIsCommaNeeded(mfRemoteText: string) {
 }
 
 export function addRemoteToHost(tree: Tree, options: Schema) {
-  if (options.mfType === 'remote' && options.host) {
+  if (options.host) {
     const hostProject = readProjectConfiguration(tree, options.host);
     const pathToMFManifest = joinPathFragments(
       hostProject.sourceRoot,

packages/angular/src/generators/setup-mf/lib/generate-config.ts

@@ -3,15 +3,15 @@ import { generateFiles, joinPathFragments, logger } from '@nrwl/devkit';
 import type { Schema } from '../schema';
 
 export function generateWebpackConfig(
-  host: Tree,
+  tree: Tree,
   options: Schema,
   appRoot: string,
   remotesWithPorts: { remoteName: string; port: number }[]
 ) {
   if (
-    host.exists(`${appRoot}/module-federation.config.js`) ||
-    host.exists(`${appRoot}/webpack.config.js`) ||
-    host.exists(`${appRoot}/webpack.prod.config.js`)
+    tree.exists(`${appRoot}/module-federation.config.js`) ||
+    tree.exists(`${appRoot}/webpack.config.js`) ||
+    tree.exists(`${appRoot}/webpack.prod.config.js`)
   ) {
     logger.warn(
       `NOTE: We encountered an existing webpack config for the app ${options.appName}. We have overwritten this file with the Module Federation Config.\n
@@ -20,7 +20,7 @@ export function generateWebpackConfig(
   }
 
   generateFiles(
-    host,
+    tree,
     joinPathFragments(__dirname, '../files/webpack'),
     appRoot,
     {

packages/angular/src/generators/setup-mf/lib/index.ts

@@ -8,3 +8,4 @@ export * from './get-remotes-with-ports';
 export * from './set-tsconfig-target';
 export * from './setup-host-if-dynamic';
 export * from './setup-serve-target';
+export * from './update-host-app-routes';

packages/angular/src/generators/setup-mf/lib/setup-host-if-dynamic.ts

@@ -3,7 +3,7 @@ import { joinPathFragments, readProjectConfiguration } from '@nrwl/devkit';
 import type { Schema } from '../schema';
 
 export function setupHostIfDynamic(tree: Tree, options: Schema) {
-  if (options.federationType === 'static' || options.mfType === 'remote') {
+  if (options.federationType === 'static') {
     return;
   }
 

packages/angular/src/generators/setup-mf/lib/update-host-app-routes.ts

@@ -0,0 +1,70 @@
+import { Tree } from 'nx/src/generators/tree';
+import { Schema } from '../schema';
+import { readProjectConfiguration } from 'nx/src/generators/utils/project-configuration';
+import { generateFiles, joinPathFragments, names } from '@nrwl/devkit';
+import * as ts from 'typescript';
+import { addRoute } from '../../../utils/nx-devkit/route-utils';
+
+export function updateHostAppRoutes(tree: Tree, options: Schema) {
+  const { sourceRoot } = readProjectConfiguration(tree, options.appName);
+
+  const remoteRoutes =
+    options.remotes && Array.isArray(options.remotes)
+      ? options.remotes.reduce(
+          (routes, remote) =>
+            `${routes}\n<li><a routerLink='${remote}'>${
+              names(remote).className
+            }</a></li>`,
+          ''
+        )
+      : '';
+
+  tree.write(
+    joinPathFragments(sourceRoot, 'app/app.component.html'),
+    `<ul class="remote-menu">
+<li><a routerLink='/'>Home</a></li>
+${remoteRoutes}
+</ul>
+<router-outlet></router-outlet>
+`
+  );
+
+  const pathToHostRootRoutingFile = joinPathFragments(
+    sourceRoot,
+    'app/app.routes.ts'
+  );
+
+  const hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
+
+  let sourceFile = ts.createSourceFile(
+    pathToHostRootRoutingFile,
+    hostRootRoutingFile,
+    ts.ScriptTarget.Latest,
+    true
+  );
+
+  addRoute(
+    tree,
+    pathToHostRootRoutingFile,
+    `{
+      path: '',
+      component: NxWelcomeComponent
+    }`
+  );
+
+  tree.write(
+    pathToHostRootRoutingFile,
+    `import { NxWelcomeComponent } from './nx-welcome.component';
+    ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`
+  );
+
+  generateFiles(
+    tree,
+    joinPathFragments(__dirname, '../files/host-files'),
+    joinPathFragments(sourceRoot, 'app'),
+    {
+      appName: options.appName,
+      tmpl: '',
+    }
+  );
+}

packages/angular/src/generators/setup-mf/setup-mf.ts

@@ -12,6 +12,7 @@ import {
   getRemotesWithPorts,
   setupHostIfDynamic,
   setupServeTarget,
+  updateHostAppRoutes,
   updateTsConfigTarget,
 } from './lib';
 
@@ -20,15 +21,20 @@ export async function setupMf(tree: Tree, options: Schema) {
 
   options.federationType = options.federationType ?? 'static';
 
-  setupHostIfDynamic(tree, options);
+  if (options.mfType === 'host') {
+    setupHostIfDynamic(tree, options);
+    updateHostAppRoutes(tree, options);
+  }
+
+  if (options.mfType === 'remote') {
+    addRemoteToHost(tree, options);
+    addRemoteEntry(tree, options, projectConfig.root);
+  }
 
   const remotesWithPorts = getRemotesWithPorts(tree, options);
-  addRemoteToHost(tree, options);
 
   generateWebpackConfig(tree, options, projectConfig.root, remotesWithPorts);
 
-  addRemoteEntry(tree, options, projectConfig.root);
-
   changeBuildTarget(tree, options);
   updateTsConfigTarget(tree, options);
   setupServeTarget(tree, options);