@angular/cli 20.1.0-next.2 → 20.1.0-rc.0

package/lib/config/schema.json

@@ -1118,7 +1118,7 @@
         },
         "name": {
           "type": "string",
-          "description": "The name for the new component. This will be used to create the component's class, template, and stylesheet files. For example, if you provide `my-component`, the files will be named `my-component.component.ts`, `my-component.component.html`, and `my-component.component.css`.",
+          "description": "The name for the new component. This will be used to create the component's class, template, and stylesheet files. For example, if you provide `my-component`, the files will be named `my-component.ts`, `my-component.html`, and `my-component.css`.",
           "$default": {
             "$source": "argv",
             "index": 0
@@ -1131,13 +1131,13 @@
           "alias": "b"
         },
         "inlineStyle": {
-          "description": "Include the component's styles directly in the `component.ts` file. By default, a separate stylesheet file (e.g., `my-component.component.css`) is created.",
+          "description": "Include the component's styles directly in the `component.ts` file. By default, a separate stylesheet file (e.g., `my-component.css`) is created.",
           "type": "boolean",
           "default": false,
           "alias": "s"
         },
         "inlineTemplate": {
-          "description": "Include the component's HTML template directly in the `component.ts` file. By default, a separate template file (e.g., `my-component.component.html`) is created.",
+          "description": "Include the component's HTML template directly in the `component.ts` file. By default, a separate template file (e.g., `my-component.html`) is created.",
           "type": "boolean",
           "default": false,
           "alias": "t"

package/lib/config/workspace-schema.d.ts

@@ -278,12 +278,12 @@ export type AngularComponentOptionsSchema = {
     flat?: boolean;
     /**
      * Include the component's styles directly in the `component.ts` file. By default, a
-     * separate stylesheet file (e.g., `my-component.component.css`) is created.
+     * separate stylesheet file (e.g., `my-component.css`) is created.
      */
     inlineStyle?: boolean;
     /**
      * Include the component's HTML template directly in the `component.ts` file. By default, a
-     * separate template file (e.g., `my-component.component.html`) is created.
+     * separate template file (e.g., `my-component.html`) is created.
      */
     inlineTemplate?: boolean;
     /**
@@ -294,8 +294,7 @@ export type AngularComponentOptionsSchema = {
     /**
      * The name for the new component. This will be used to create the component's class,
      * template, and stylesheet files. For example, if you provide `my-component`, the files
-     * will be named `my-component.component.ts`, `my-component.component.html`, and
-     * `my-component.component.css`.
+     * will be named `my-component.ts`, `my-component.html`, and `my-component.css`.
      */
     name: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "20.1.0-next.2",
+  "version": "20.1.0-rc.0",
   "description": "CLI tool for Angular",
   "main": "lib/cli/index.js",
   "bin": {
@@ -25,12 +25,13 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/architect": "0.2001.0-next.2",
-    "@angular-devkit/core": "20.1.0-next.2",
-    "@angular-devkit/schematics": "20.1.0-next.2",
-    "@inquirer/prompts": "7.5.3",
+    "@angular-devkit/architect": "0.2001.0-rc.0",
+    "@angular-devkit/core": "20.1.0-rc.0",
+    "@angular-devkit/schematics": "20.1.0-rc.0",
+    "@inquirer/prompts": "7.6.0",
     "@listr2/prompt-adapter-inquirer": "2.0.22",
-    "@schematics/angular": "20.1.0-next.2",
+    "@modelcontextprotocol/sdk": "1.13.3",
+    "@schematics/angular": "20.1.0-rc.0",
     "@yarnpkg/lockfile": "1.1.0",
     "ini": "5.0.0",
     "jsonc-parser": "3.3.1",
@@ -45,14 +46,14 @@
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",
     "packageGroup": {
-      "@angular/cli": "20.1.0-next.2",
-      "@angular/build": "20.1.0-next.2",
-      "@angular/ssr": "20.1.0-next.2",
-      "@angular-devkit/architect": "0.2001.0-next.2",
-      "@angular-devkit/build-angular": "20.1.0-next.2",
-      "@angular-devkit/build-webpack": "0.2001.0-next.2",
-      "@angular-devkit/core": "20.1.0-next.2",
-      "@angular-devkit/schematics": "20.1.0-next.2"
+      "@angular/cli": "20.1.0-rc.0",
+      "@angular/build": "20.1.0-rc.0",
+      "@angular/ssr": "20.1.0-rc.0",
+      "@angular-devkit/architect": "0.2001.0-rc.0",
+      "@angular-devkit/build-angular": "20.1.0-rc.0",
+      "@angular-devkit/build-webpack": "0.2001.0-rc.0",
+      "@angular-devkit/core": "20.1.0-rc.0",
+      "@angular-devkit/schematics": "20.1.0-rc.0"
     }
   },
   "packageManager": "pnpm@9.15.9",

package/src/commands/command-config.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import { CommandModuleConstructor } from '../command-builder/utilities/command';
-export type CommandNames = 'add' | 'analytics' | 'build' | 'cache' | 'completion' | 'config' | 'deploy' | 'e2e' | 'extract-i18n' | 'generate' | 'lint' | 'make-this-awesome' | 'new' | 'run' | 'serve' | 'test' | 'update' | 'version';
+export type CommandNames = 'add' | 'analytics' | 'build' | 'cache' | 'completion' | 'config' | 'deploy' | 'e2e' | 'extract-i18n' | 'generate' | 'lint' | 'make-this-awesome' | 'mcp' | 'new' | 'run' | 'serve' | 'test' | 'update' | 'version';
 export interface CommandConfig {
     aliases?: string[];
     factory: () => Promise<{

package/src/commands/command-config.js

@@ -81,6 +81,9 @@ exports.RootCommands = {
     'make-this-awesome': {
         factory: () => Promise.resolve().then(() => __importStar(require('./make-this-awesome/cli'))),
     },
+    'mcp': {
+        factory: () => Promise.resolve().then(() => __importStar(require('./mcp/cli'))),
+    },
     'new': {
         factory: () => Promise.resolve().then(() => __importStar(require('./new/cli'))),
         aliases: ['n'],

package/src/commands/mcp/cli.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import { Argv } from 'yargs';
+import { CommandModule, CommandModuleImplementation } from '../../command-builder/command-module';
+export default class McpCommandModule extends CommandModule implements CommandModuleImplementation {
+    command: string;
+    describe: false;
+    longDescriptionPath: undefined;
+    builder(localYargs: Argv): Argv;
+    run(): Promise<void>;
+}

package/src/commands/mcp/cli.js

@@ -0,0 +1,45 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
+const command_module_1 = require("../../command-builder/command-module");
+const tty_1 = require("../../utilities/tty");
+const mcp_server_1 = require("./mcp-server");
+const INTERACTIVE_MESSAGE = `
+To start using the Angular CLI MCP Server, add this configuration to your host:
+
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["@angular/cli", "mcp"]
+    }
+  }
+}
+
+Exact configuration may differ depending on the host.
+`;
+class McpCommandModule extends command_module_1.CommandModule {
+    command = 'mcp';
+    describe = false;
+    longDescriptionPath = undefined;
+    builder(localYargs) {
+        return localYargs;
+    }
+    async run() {
+        if ((0, tty_1.isTTY)()) {
+            this.context.logger.info(INTERACTIVE_MESSAGE);
+            return;
+        }
+        const server = await (0, mcp_server_1.createMcpServer)({ workspace: this.context.workspace });
+        const transport = new stdio_js_1.StdioServerTransport();
+        await server.connect(transport);
+    }
+}
+exports.default = McpCommandModule;

package/src/commands/mcp/instructions/best-practices.md

@@ -0,0 +1,44 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Don't use explicit `standalone: true` (it is implied by default)
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- DO NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

package/src/commands/mcp/mcp-server.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import type { AngularWorkspace } from '../../utilities/config';
+export declare function createMcpServer(context: {
+    workspace?: AngularWorkspace;
+}): Promise<McpServer>;

package/src/commands/mcp/mcp-server.js

@@ -0,0 +1,61 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMcpServer = createMcpServer;
+const mcp_js_1 = require("@modelcontextprotocol/sdk/server/mcp.js");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = __importDefault(require("node:path"));
+const version_1 = require("../../utilities/version");
+async function createMcpServer(context) {
+    const server = new mcp_js_1.McpServer({
+        name: 'angular-cli-server',
+        version: version_1.VERSION.full,
+        capabilities: {
+            resources: {},
+            tools: {},
+        },
+    });
+    server.registerResource('instructions', 'instructions://best-practices', {
+        title: 'Angular System Instructions',
+        description: 'A set of instructions to help LLMs generate correct code that follows Angular best practices.',
+        mimeType: 'text/markdown',
+    }, async () => {
+        const text = await (0, promises_1.readFile)(node_path_1.default.join(__dirname, 'instructions', 'best-practices.md'), 'utf-8');
+        return { contents: [{ uri: 'instructions://best-practices', text }] };
+    });
+    server.registerTool('list_projects', {
+        title: 'List projects',
+        description: 'List projects within an Angular workspace.' +
+            ' This information is read from the `angular.json` file at the root path of the Angular workspace',
+    }, () => {
+        if (!context.workspace) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Not within an Angular project.',
+                    },
+                ],
+            };
+        }
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'Projects in the Angular workspace: ' +
+                        [...context.workspace.projects.keys()].join(','),
+                },
+            ],
+        };
+    });
+    return server;
+}

package/src/utilities/version.js

@@ -22,4 +22,4 @@ class Version {
         this.patch = patch;
     }
 }
-exports.VERSION = new Version('20.1.0-next.2');
+exports.VERSION = new Version('20.1.0-rc.0');