cleanup(angular): cleanup remote generator (#13346)

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

@@ -1,9 +1,7 @@
 import {
   formatFiles,
   getProjects,
-  joinPathFragments,
   readProjectConfiguration,
-  readWorkspaceConfiguration,
   Tree,
 } from '@nrwl/devkit';
 import type { Schema } from './schema';
@@ -62,8 +60,6 @@ export async function remote(tree: Tree, options: Schema) {
     standalone: options.standalone,
   });
 
-  removeDeadCode(tree, options);
-
   if (!options.skipFormat) {
     await formatFiles(tree);
   }
@@ -71,86 +67,4 @@ export async function remote(tree: Tree, options: Schema) {
   return installTask;
 }
 
-function removeDeadCode(tree: Tree, options: Schema) {
-  const projectName = normalizeProjectName(options.name, options.directory);
-  const project = readProjectConfiguration(tree, projectName);
-
-  ['css', 'less', 'scss', 'sass'].forEach((style) => {
-    const pathToComponentStyle = joinPathFragments(
-      project.sourceRoot,
-      `app/app.component.${style}`
-    );
-    if (tree.exists(pathToComponentStyle)) {
-      tree.delete(pathToComponentStyle);
-    }
-  });
-
-  tree.rename(
-    joinPathFragments(project.sourceRoot, 'app/nx-welcome.component.ts'),
-    joinPathFragments(
-      project.sourceRoot,
-      'app/remote-entry/nx-welcome.component.ts'
-    )
-  );
-  tree.delete(
-    joinPathFragments(project.sourceRoot, 'app/app.component.spec.ts')
-  );
-  tree.delete(joinPathFragments(project.sourceRoot, 'app/app.component.html'));
-
-  const pathToAppComponent = joinPathFragments(
-    project.sourceRoot,
-    'app/app.component.ts'
-  );
-  if (!options.standalone) {
-    const component =
-      tree
-        .read(pathToAppComponent, 'utf-8')
-        .split(options.inlineTemplate ? 'template' : 'templateUrl')[0] +
-      `template: '<router-outlet></router-outlet>'
-
-})
-export class AppComponent {}`;
-
-    tree.write(pathToAppComponent, component);
-
-    tree.write(
-      joinPathFragments(project.sourceRoot, 'app/app.module.ts'),
-      `import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-
-@NgModule({
- declarations: [AppComponent],
- imports: [
-   BrowserModule,
-   RouterModule.forRoot([{
-     path: '',
-     loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)
-   }], { initialNavigation: 'enabledBlocking' }),
- ],
- providers: [],
- bootstrap: [AppComponent],
-})
-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);
-  }
-}
-
 export default remote;

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

@@ -9,3 +9,4 @@ export * from './set-tsconfig-target';
 export * from './setup-host-if-dynamic';
 export * from './setup-serve-target';
 export * from './update-host-app-routes';
+export * from './remove-dead-code-from-remote';

packages/angular/src/generators/setup-mf/lib/remove-dead-code-from-remote.ts

@@ -0,0 +1,92 @@
+import { Tree } from 'nx/src/generators/tree';
+import { Schema } from '../schema';
+import {
+  readProjectConfiguration,
+  readWorkspaceConfiguration,
+} from 'nx/src/generators/utils/project-configuration';
+import { joinPathFragments } from 'nx/src/utils/path';
+
+export function removeDeadCodeFromRemote(tree: Tree, options: Schema) {
+  const projectName = options.appName;
+  const project = readProjectConfiguration(tree, projectName);
+
+  ['css', 'less', 'scss', 'sass'].forEach((style) => {
+    const pathToComponentStyle = joinPathFragments(
+      project.sourceRoot,
+      `app/app.component.${style}`
+    );
+    if (tree.exists(pathToComponentStyle)) {
+      tree.delete(pathToComponentStyle);
+    }
+  });
+
+  tree.rename(
+    joinPathFragments(project.sourceRoot, 'app/nx-welcome.component.ts'),
+    joinPathFragments(
+      project.sourceRoot,
+      'app/remote-entry/nx-welcome.component.ts'
+    )
+  );
+  tree.delete(
+    joinPathFragments(project.sourceRoot, 'app/app.component.spec.ts')
+  );
+  tree.delete(joinPathFragments(project.sourceRoot, 'app/app.component.html'));
+
+  const pathToAppComponent = joinPathFragments(
+    project.sourceRoot,
+    'app/app.component.ts'
+  );
+  if (!options.standalone) {
+    const componentContents = tree.read(pathToAppComponent, 'utf-8');
+    const isInlineTemplate = !componentContents.includes('templateUrl');
+
+    const component =
+      componentContents.split(
+        isInlineTemplate ? 'template' : 'templateUrl'
+      )[0] +
+      `template: '<router-outlet></router-outlet>'
+
+})
+export class AppComponent {}`;
+
+    tree.write(pathToAppComponent, component);
+
+    tree.write(
+      joinPathFragments(project.sourceRoot, 'app/app.module.ts'),
+      `import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [
+   BrowserModule,
+   RouterModule.forRoot([{
+     path: '',
+     loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)
+   }], { initialNavigation: 'enabledBlocking' }),
+ ],
+ providers: [],
+ bootstrap: [AppComponent],
+})
+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);
+  }
+}

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

@@ -10,6 +10,7 @@ import {
   fixBootstrap,
   generateWebpackConfig,
   getRemotesWithPorts,
+  removeDeadCodeFromRemote,
   setupHostIfDynamic,
   setupServeTarget,
   updateHostAppRoutes,
@@ -29,6 +30,7 @@ export async function setupMf(tree: Tree, options: Schema) {
   if (options.mfType === 'remote') {
     addRemoteToHost(tree, options);
     addRemoteEntry(tree, options, projectConfig.root);
+    removeDeadCodeFromRemote(tree, options);
   }
 
   const remotesWithPorts = getRemotesWithPorts(tree, options);