refactor(@angular/cli): Make modernize use the file system

- Refactors the `modernize` tool to run all schematics on a temporary directory on the file system instead of using the `SchematicTestRunner` and a virtual file system.
- This fixes issues with migrations that require access to the real file system, such as the `control-flow-migration`.
- Extracts the core logic into a separate `runModernization` function to improve testability.
- Adds a new test suite (`modernize_spec.ts`) to cover the refactored logic, including tests for default transformations, file system setup, and updated file content.

Author: amishne

packages/angular/cli/BUILD.bazel

@@ -166,4 +166,4 @@ npm_package(
         ":angular-cli",
         ":license",
     ],
-)
+)

packages/angular/cli/src/commands/mcp/tools/modernize.ts

@@ -1,8 +1,5 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
-import { Tree } from '@angular-devkit/schematics';
 import { z } from 'zod';
-import path from 'node:path';
 
 interface Transformation {
   name: string;
@@ -58,5 +55,121 @@ const TRANSFORMATIONS: Array<Transformation> = [
       'Converts the application to use standalone components, directives, and pipes. This is a three-step process. After each step, you should verify that your application builds and runs correctly.',
     instructions: `This migration requires running a cli schematic multiple times. Run the commands in the order listed below, verifying that your code builds and runs between each step:
 
-1. Run 
-`ng g @angular/core:standalone` and select
+1. Run \`ng g @angular/core:standalone\` and select "Convert all components, directives and pipes to standalone"
+2. Run \`ng g @angular/core:standalone\` and select "Remove unnecessary NgModule classes"
+3. Run \`ng g @angular/core:standalone\` and select "Bootstrap the project using standalone APIs"
+`,
+    documentationUrl: 'https://angular.dev/reference/migrations/standalone',
+  },
+  {
+    name: 'zoneless',
+    description: 'Migrates the application to be zoneless.',
+    documentationUrl: 'https://angular.dev/guide/zoneless',
+  },
+];
+
+const modernizeInputSchema = z.object({
+  // Casting to [string, ...string[]] since the enum definition requires a nonempty array.
+  transformations: z
+    .array(z.enum(TRANSFORMATIONS.map((t) => t.name) as [string, ...string[]]))
+    .optional(),
+});
+
+export type ModernizeInput = z.infer<typeof modernizeInputSchema>;
+
+export async function runModernization(input: ModernizeInput) {
+  try {
+    if (!input.transformations || input.transformations.length === 0) {
+      const instructions = [
+        'See https://angular.dev/best-practices for Angular best practices. You can call this tool if you have specific transformation you want to run.',
+      ];
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: JSON.stringify({
+              instructions,
+            }),
+          },
+        ],
+        structuredContent: {
+          instructions,
+        },
+      };
+    }
+
+    const transformationsToRun = TRANSFORMATIONS.filter((t) =>
+      input.transformations!.includes(t.name),
+    );
+
+    const allInstructions: string[] = [];
+
+    for (const transformation of transformationsToRun) {
+      let transformationInstructions = '';
+      if (transformation.instructions) {
+        transformationInstructions = transformation.instructions;
+      } else {
+        // If no instructions are included, default to running a cli schematic with the transformation name.
+        const command = `ng generate @angular/core:${transformation.name}`;
+        transformationInstructions = `To run the ${transformation.name} migration, execute the following command: \`${command}\`.`;
+      }
+      if (transformation.documentationUrl) {
+        transformationInstructions += `\nFor more information, see ${transformation.documentationUrl}.`;
+      }
+      allInstructions.push(transformationInstructions);
+    }
+
+    const structuredContent = {
+      instructions: allInstructions.length ? allInstructions : undefined,
+    };
+
+    return {
+      content: [{ type: 'text' as const, text: JSON.stringify(structuredContent) }],
+      structuredContent,
+    };
+  } catch (e) {
+    const message = e instanceof Error ? e.message : 'An unknown error occurred.';
+    return {
+      content: [
+        {
+          type: 'text' as const,
+          text: `Failed to run modernization migrations: ${message}`,
+        },
+      ],
+      structuredContent: {},
+      isError: true,
+    };
+  }
+}
+
+export function registerModernizeTool(server: McpServer): void {
+  server.registerTool(
+    'modernize',
+    {
+      title: 'Modernize Angular Code',
+      description:
+        '<Purpose>\n' +
+        'This tool modernizes Angular code by applying the latest best practices and syntax improvements, ensuring it is idiomatic, readable, and maintainable.\n\n' +
+        '</Purpose>\n' +
+        '<Use Cases>\n' +
+        '* After generating new code: Run this tool immediately after creating new Angular components, directives, or services to ensure they adhere to modern standards.\n' +
+        '* On existing code: Apply to existing TypeScript files (.ts) and Angular templates (.ng.html) to update them with the latest features, such as the new built-in control flow syntax.\n\n' +
+        '* When the user asks for a specific transformation: When the transformation list is populated, these specific ones will be ran on the inputs.\n' +
+        '</Use Cases>\n' +
+        '<Transformations>\n' +
+        TRANSFORMATIONS.map((t) => `* ${t.name}: ${t.description}`).join('\n') +
+        '\n</Transformations>\n',
+      annotations: {
+        readOnlyHint: true,
+      },
+      inputSchema: modernizeInputSchema.shape,
+      outputSchema: {
+        instructions: z
+          .array(z.string())
+          .optional()
+          .describe('A list of instructions on how to run the migrations.'),
+      },
+    },
+    (input) => runModernization(input as ModernizeInput),
+  );
+}

packages/angular/cli/src/commands/mcp/tools/modernize_spec.ts

@@ -16,8 +16,7 @@ describe('Modernize Tool', () => {
     });
 
     expect(instructions).toEqual([
-      'To run the self-closing-tags-migration migration, execute the following command: `ng generate @angular/core:self-closing-tags-migration`.' +
-        '\nFor more information, see https://angular.dev/reference/migrations/self-closing-tags.',
+      'To run the self-closing-tags-migration migration, execute the following command: `ng generate @angular/core:self-closing-tags-migration`.\nFor more information, see https://angular.dev/reference/migrations/self-closing-tags.',
     ]);
   });
 
@@ -27,10 +26,8 @@ describe('Modernize Tool', () => {
     });
 
     const expectedInstructions = [
-      'To run the self-closing-tags-migration migration, execute the following command: `ng generate @angular/core:self-closing-tags-migration`.' +
-        '\nFor more information, see https://angular.dev/reference/migrations/self-closing-tags.',
-      'To run the test-bed-get migration, execute the following command: `ng generate @angular/core:test-bed-get`.' +
-        '\nFor more information, see https://angular.dev/guide/testing/dependency-injection.',
+      'To run the self-closing-tags-migration migration, execute the following command: `ng generate @angular/core:self-closing-tags-migration`.\nFor more information, see https://angular.dev/reference/migrations/self-closing-tags.',
+      'To run the test-bed-get migration, execute the following command: `ng generate @angular/core:test-bed-get`.\nFor more information, see https://angular.dev/guide/testing/dependency-injection.',
     ];
 
     expect(instructions?.sort()).toEqual(expectedInstructions.sort());
@@ -55,4 +52,4 @@ describe('Modernize Tool', () => {
       'Run the commands in the order listed below, verifying that your code builds and runs between each step:',
     );
   });
-});
+});