@angular/cli 21.0.0-next.1 → 21.0.0-next.2

package/lib/config/schema.json

@@ -1049,6 +1049,15 @@
           "description": "Generate an application that does not use `zone.js`.",
           "type": "boolean",
           "default": false
+        },
+        "fileNameStyleGuide": {
+          "type": "string",
+          "enum": [
+            "2016",
+            "2025"
+          ],
+          "default": "2025",
+          "description": "The file naming convention to use for generated files. The '2025' style guide (default) uses a concise format (e.g., `app.ts` for the root component), while the '2016' style guide includes the type in the file name (e.g., `app.component.ts`). For more information, see the Angular Style Guide (https://angular.dev/style-guide)."
         }
       }
     },
@@ -1196,6 +1205,11 @@
           "type": "string",
           "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`."
         },
+        "addTypeToClassName": {
+          "type": "boolean",
+          "default": true,
+          "description": "When true, the 'type' option will be appended to the generated class name. When false, only the file name will include the type."
+        },
         "skipTests": {
           "type": "boolean",
           "description": "Skip the generation of unit test files `spec.ts`.",
@@ -1325,6 +1339,11 @@
         "type": {
           "type": "string",
           "description": "Append a custom type to the directive's filename. For example, if you set the type to `directive`, the file will be named `example.directive.ts`."
+        },
+        "addTypeToClassName": {
+          "type": "boolean",
+          "default": true,
+          "description": "When true, the 'type' option will be appended to the generated class name. When false, only the file name will include the type."
         }
       }
     },
@@ -1832,6 +1851,15 @@
               "windsurf"
             ]
           }
+        },
+        "fileNameStyleGuide": {
+          "type": "string",
+          "enum": [
+            "2016",
+            "2025"
+          ],
+          "default": "2025",
+          "description": "The file naming convention to use for generated files. The '2025' style guide (default) uses a concise format (e.g., `app.ts` for the root component), while the '2016' style guide includes the type in the file name (e.g., `app.component.ts`). For more information, see the Angular Style Guide (https://angular.dev/style-guide)."
         }
       }
     },
@@ -1933,6 +1961,11 @@
         "type": {
           "type": "string",
           "description": "Append a custom type to the service's filename. For example, if you set the type to `service`, the file will be named `my-service.service.ts`."
+        },
+        "addTypeToClassName": {
+          "type": "boolean",
+          "default": true,
+          "description": "When true, the 'type' option will be appended to the generated class name. When false, only the file name will include the type."
         }
       }
     },

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

@@ -105,6 +105,13 @@ export type SchematicOptions = {
  * routing, styling, and testing.
  */
 export type AngularApplicationOptionsSchema = {
+    /**
+     * The file naming convention to use for generated files. The '2025' style guide (default)
+     * uses a concise format (e.g., `app.ts` for the root component), while the '2016' style
+     * guide includes the type in the file name (e.g., `app.component.ts`). For more
+     * information, see the Angular Style Guide (https://angular.dev/style-guide).
+     */
+    fileNameStyleGuide?: FileNameStyleGuide;
     /**
      * Include the styles for the root component directly within the `app.component.ts` file.
      * Only CSS styles can be included inline. By default, a separate stylesheet file (e.g.,
@@ -186,6 +193,16 @@ export type AngularApplicationOptionsSchema = {
      */
     zoneless?: boolean;
 };
+/**
+ * The file naming convention to use for generated files. The '2025' style guide (default)
+ * uses a concise format (e.g., `app.ts` for the root component), while the '2016' style
+ * guide includes the type in the file name (e.g., `app.component.ts`). For more
+ * information, see the Angular Style Guide (https://angular.dev/style-guide).
+ */
+export declare enum FileNameStyleGuide {
+    The2016 = "2016",
+    The2025 = "2025"
+}
 /**
  * The type of stylesheet files to be created for components in the application.
  *
@@ -253,6 +270,11 @@ export type AngularClassOptionsSchema = {
  * optional CSS stylesheet. Use this schematic to generate a new component in your project.
  */
 export type AngularComponentOptionsSchema = {
+    /**
+     * When true, the 'type' option will be appended to the generated class name. When false,
+     * only the file name will include the type.
+     */
+    addTypeToClassName?: boolean;
     /**
      * Configures the change detection strategy for the component.
      */
@@ -381,6 +403,11 @@ export declare enum SchematicsAngularComponentStyle {
  * and boilerplate code for a new directive.
  */
 export type AngularDirectiveOptionsSchema = {
+    /**
+     * When true, the 'type' option will be appended to the generated class name. When false,
+     * only the file name will include the type.
+     */
+    addTypeToClassName?: boolean;
     /**
      * Automatically export the directive from the specified NgModule, making it accessible to
      * other modules in the application.
@@ -692,6 +719,13 @@ export type AngularNgNewOptionsSchema = {
      * the workspace will be created in the current directory.
      */
     directory?: string;
+    /**
+     * The file naming convention to use for generated files. The '2025' style guide (default)
+     * uses a concise format (e.g., `app.ts` for the root component), while the '2016' style
+     * guide includes the type in the file name (e.g., `app.component.ts`). For more
+     * information, see the Angular Style Guide (https://angular.dev/style-guide).
+     */
+    fileNameStyleGuide?: FileNameStyleGuide;
     /**
      * Include the styles for the initial application's root component directly within the
      * `app.component.ts` file. By default, a separate stylesheet file (e.g.,
@@ -907,6 +941,11 @@ export type AngularResolverOptionsSchema = {
  * process of generating a new service with the necessary files and boilerplate code.
  */
 export type AngularServiceOptionsSchema = {
+    /**
+     * When true, the 'type' option will be appended to the generated class name. When false,
+     * only the file name will include the type.
+     */
+    addTypeToClassName?: boolean;
     /**
      * Creates files at the top level of the project or the given path. If set to false, a new
      * folder with the service's name will be created to contain the files.

package/lib/config/workspace-schema.js

@@ -2,7 +2,7 @@
 // THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
 // CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AiConfig = exports.TypeSeparator = exports.Implement = exports.SchematicsAngularComponentStyle = exports.ChangeDetection = exports.ViewEncapsulation = exports.SchematicsAngularApplicationStyle = exports.PackageManager = exports.Environment = void 0;
+exports.AiConfig = exports.TypeSeparator = exports.Implement = exports.SchematicsAngularComponentStyle = exports.ChangeDetection = exports.ViewEncapsulation = exports.SchematicsAngularApplicationStyle = exports.FileNameStyleGuide = exports.PackageManager = exports.Environment = void 0;
 /**
  * Configure in which environment disk cache is enabled.
  */
@@ -24,6 +24,17 @@ var PackageManager;
     PackageManager["Pnpm"] = "pnpm";
     PackageManager["Yarn"] = "yarn";
 })(PackageManager || (exports.PackageManager = PackageManager = {}));
+/**
+ * The file naming convention to use for generated files. The '2025' style guide (default)
+ * uses a concise format (e.g., `app.ts` for the root component), while the '2016' style
+ * guide includes the type in the file name (e.g., `app.component.ts`). For more
+ * information, see the Angular Style Guide (https://angular.dev/style-guide).
+ */
+var FileNameStyleGuide;
+(function (FileNameStyleGuide) {
+    FileNameStyleGuide["The2016"] = "2016";
+    FileNameStyleGuide["The2025"] = "2025";
+})(FileNameStyleGuide || (exports.FileNameStyleGuide = FileNameStyleGuide = {}));
 /**
  * The type of stylesheet files to be created for components in the application.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "21.0.0-next.1",
+  "version": "21.0.0-next.2",
   "description": "CLI tool for Angular",
   "main": "lib/cli/index.js",
   "bin": {
@@ -25,18 +25,18 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/architect": "0.2100.0-next.1",
-    "@angular-devkit/core": "21.0.0-next.1",
-    "@angular-devkit/schematics": "21.0.0-next.1",
+    "@angular-devkit/architect": "0.2100.0-next.2",
+    "@angular-devkit/core": "21.0.0-next.2",
+    "@angular-devkit/schematics": "21.0.0-next.2",
     "@inquirer/prompts": "7.8.4",
-    "@listr2/prompt-adapter-inquirer": "3.0.2",
-    "@modelcontextprotocol/sdk": "1.17.4",
-    "@schematics/angular": "21.0.0-next.1",
+    "@listr2/prompt-adapter-inquirer": "3.0.3",
+    "@modelcontextprotocol/sdk": "1.17.5",
+    "@schematics/angular": "21.0.0-next.2",
     "@yarnpkg/lockfile": "1.1.0",
-    "algoliasearch": "5.36.0",
+    "algoliasearch": "5.37.0",
     "ini": "5.0.0",
     "jsonc-parser": "3.3.1",
-    "listr2": "9.0.2",
+    "listr2": "9.0.3",
     "npm-package-arg": "13.0.0",
     "pacote": "21.0.0",
     "resolve": "1.22.10",
@@ -47,17 +47,17 @@
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",
     "packageGroup": {
-      "@angular/cli": "21.0.0-next.1",
-      "@angular/build": "21.0.0-next.1",
-      "@angular/ssr": "21.0.0-next.1",
-      "@angular-devkit/architect": "0.2100.0-next.1",
-      "@angular-devkit/build-angular": "21.0.0-next.1",
-      "@angular-devkit/build-webpack": "0.2100.0-next.1",
-      "@angular-devkit/core": "21.0.0-next.1",
-      "@angular-devkit/schematics": "21.0.0-next.1"
+      "@angular/cli": "21.0.0-next.2",
+      "@angular/build": "21.0.0-next.2",
+      "@angular/ssr": "21.0.0-next.2",
+      "@angular-devkit/architect": "0.2100.0-next.2",
+      "@angular-devkit/build-angular": "21.0.0-next.2",
+      "@angular-devkit/build-webpack": "0.2100.0-next.2",
+      "@angular-devkit/core": "21.0.0-next.2",
+      "@angular-devkit/schematics": "21.0.0-next.2"
     }
   },
-  "packageManager": "pnpm@10.15.0",
+  "packageManager": "pnpm@10.15.1",
   "engines": {
     "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",

package/src/command-builder/architect-command-module.js

@@ -109,9 +109,14 @@ let ArchitectCommandModule = (() => {
             return this.addSchemaOptionsToCommand(localYargs, schemaOptions);
         }
         async run(options) {
-            const target = this.getArchitectTarget();
-            const { configuration = '', project, ...architectOptions } = options;
-            if (!project) {
+            const originalProcessTitle = process.title;
+            try {
+                const target = this.getArchitectTarget();
+                const { configuration = '', project, ...architectOptions } = options;
+                if (project) {
+                    process.title = `${originalProcessTitle} (${project})`;
+                    return await this.runSingleTarget({ configuration, target, project }, architectOptions);
+                }
                 // This runs each target sequentially.
                 // Running them in parallel would jumble the log messages.
                 let result = 0;
@@ -120,12 +125,13 @@ let ArchitectCommandModule = (() => {
                     return this.onMissingTarget('Cannot determine project or target for command.');
                 }
                 for (const project of projectNames) {
+                    process.title = `${originalProcessTitle} (${project})`;
                     result |= await this.runSingleTarget({ configuration, target, project }, architectOptions);
                 }
                 return result;
             }
-            else {
-                return await this.runSingleTarget({ configuration, target, project }, architectOptions);
+            finally {
+                process.title = originalProcessTitle;
             }
         }
         getArchitectProject() {

package/src/command-builder/utilities/json-schema.js

@@ -125,7 +125,7 @@ async function parseJsonSchemaToOptions(registry, schema, interactive = true) {
                     }
                     break;
                 case 'array':
-                    if (Array.isArray(current.default)) {
+                    if (Array.isArray(current.default) && current.default.length > 0) {
                         defaultValue = current.default;
                     }
                     break;

package/src/commands/add/cli.js

@@ -43,7 +43,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const tools_1 = require("@angular-devkit/schematics/tools");
 const listr2_1 = require("listr2");
 const node_assert_1 = __importDefault(require("node:assert"));
 const node_module_1 = require("node:module");
@@ -70,6 +69,16 @@ const packageVersionExclusions = {
     '@angular/material': '7.x',
 };
 const DEFAULT_CONFLICT_DISPLAY_LIMIT = 5;
+/**
+ * A map of packages to built-in schematics.
+ * This is used for packages that do not have a native `ng-add` schematic.
+ */
+const BUILT_IN_SCHEMATICS = {
+    tailwindcss: {
+        collection: '@schematics/angular',
+        name: 'tailwind',
+    },
+};
 class AddCommandModule extends schematics_command_module_1.SchematicsCommandModule {
     command = 'add <collection>';
     describe = 'Adds support for an external library to your project.';
@@ -188,8 +197,46 @@ class AddCommandModule extends schematics_command_module_1.SchematicsCommandModu
         try {
             const result = await tasks.run(taskContext);
             (0, node_assert_1.default)(result.collectionName, 'Collection name should always be available');
+            // Check if the installed package has actual add actions and not just schematic support
+            if (result.hasSchematics && !options.dryRun) {
+                const workflow = this.getOrCreateWorkflowForBuilder(result.collectionName);
+                const collection = workflow.engine.createCollection(result.collectionName);
+                // listSchematicNames cannot be used here since it does not list private schematics.
+                // Most `ng-add` schematics are marked as private.
+                // TODO: Consider adding a `hasSchematic` helper to the schematic collection object.
+                try {
+                    collection.createSchematic(this.schematicName, true);
+                }
+                catch {
+                    result.hasSchematics = false;
+                }
+            }
+            if (!result.hasSchematics) {
+                // Fallback to a built-in schematic if the package does not have an `ng-add` schematic
+                const packageName = result.packageIdentifier.name;
+                if (packageName) {
+                    const builtInSchematic = BUILT_IN_SCHEMATICS[packageName];
+                    if (builtInSchematic) {
+                        logger.info(`The ${listr2_1.color.blue(packageName)} package does not provide \`ng add\` actions.`);
+                        logger.info('The Angular CLI will use built-in actions to add it to your project.');
+                        return this.executeSchematic({
+                            ...options,
+                            collection: builtInSchematic.collection,
+                            schematicName: builtInSchematic.name,
+                        });
+                    }
+                }
+                let message = options.dryRun
+                    ? 'The package does not provide any `ng add` actions, so no further actions would be taken.'
+                    : 'Package installed successfully. The package does not provide any `ng add` actions, so no further actions were taken.';
+                if (result.homepage) {
+                    message += `\nFor more information about this package, visit its homepage at ${result.homepage}`;
+                }
+                logger.info(message);
+                return;
+            }
             if (options.dryRun) {
-                logger.info('The package schematic would be executed next.');
+                logger.info("The package's `ng add` actions would be executed next.");
                 return;
             }
             return this.executeSchematic({ ...options, collection: result.collectionName });
@@ -313,8 +360,10 @@ class AddCommandModule extends schematics_command_module_1.SchematicsCommandModu
             (0, error_1.assertIsError)(e);
             throw new CommandError(`Unable to fetch package information for '${context.packageIdentifier}': ${e.message}`);
         }
+        context.hasSchematics = !!manifest.schematics;
         context.savePackage = manifest['ng-add']?.save;
         context.collectionName = manifest.name;
+        context.homepage = manifest.homepage;
         if (await this.getPeerDependencyConflicts(manifest)) {
             task.output = listr2_1.color.yellow(listr2_1.figures.warning +
                 ' Package has unmet peer dependencies. Adding the package may not succeed.');
@@ -419,30 +468,20 @@ class AddCommandModule extends schematics_command_module_1.SchematicsCommandModu
         }
         return false;
     }
-    async executeSchematic(options) {
-        try {
-            const { verbose, skipConfirmation, interactive, force, dryRun, registry, defaults, collection: collectionName, ...schematicOptions } = options;
-            return await this.runSchematic({
-                schematicOptions,
-                schematicName: this.schematicName,
-                collectionName,
-                executionOptions: {
-                    interactive,
-                    force,
-                    dryRun,
-                    defaults,
-                    packageRegistry: registry,
-                },
-            });
-        }
-        catch (e) {
-            if (e instanceof tools_1.NodePackageDoesNotSupportSchematics) {
-                this.context.logger.error('The package that you are trying to add does not support schematics.' +
-                    'You can try using a different version of the package or contact the package author to add ng-add support.');
-                return 1;
-            }
-            throw e;
-        }
+    executeSchematic(options) {
+        const { verbose, skipConfirmation, interactive, force, dryRun, registry, defaults, collection: collectionName, schematicName, ...schematicOptions } = options;
+        return this.runSchematic({
+            schematicOptions,
+            schematicName: schematicName ?? this.schematicName,
+            collectionName,
+            executionOptions: {
+                interactive,
+                force,
+                dryRun,
+                defaults,
+                packageRegistry: registry,
+            },
+        });
     }
     async findProjectVersion(name) {
         const cachedVersion = this.#projectVersionCache.get(name);

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

@@ -14,11 +14,21 @@ import { AnyMcpToolDeclaration } from './tools/tool-registry';
  */
 export declare const EXPERIMENTAL_TOOLS: readonly [import("./tools/tool-registry").McpToolDeclaration<{
     query: import("zod").ZodString;
-}, import("zod").ZodRawShape>, import("./tools/tool-registry").McpToolDeclaration<{
+}, {
+    examples: import("zod").ZodArray<import("zod").ZodObject<{
+        content: import("zod").ZodString;
+    }, "strip", import("zod").ZodTypeAny, {
+        content: string;
+    }, {
+        content: string;
+    }>, "many">;
+}>, import("./tools/tool-registry").McpToolDeclaration<{
     transformations: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodEnum<[string, ...string[]]>, "many">>;
 }, {
     instructions: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodString, "many">>;
-}>];
+}>, import("./tools/tool-registry").McpToolDeclaration<{
+    fileOrDirPath: import("zod").ZodString;
+}, import("zod").ZodRawShape>];
 export declare function createMcpServer(options: {
     workspace?: AngularWorkspace;
     readOnly?: boolean;

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

@@ -21,6 +21,7 @@ const best_practices_1 = require("./tools/best-practices");
 const doc_search_1 = require("./tools/doc-search");
 const examples_1 = require("./tools/examples");
 const modernize_1 = require("./tools/modernize");
+const zoneless_migration_1 = require("./tools/onpush-zoneless-migration/zoneless-migration");
 const projects_1 = require("./tools/projects");
 const tool_registry_1 = require("./tools/tool-registry");
 /**
@@ -32,7 +33,11 @@ const STABLE_TOOLS = [best_practices_1.BEST_PRACTICES_TOOL, doc_search_1.DOC_SEA
  * The set of tools that are available but not enabled by default.
  * These tools are considered experimental and may have limitations.
  */
-exports.EXPERIMENTAL_TOOLS = [examples_1.FIND_EXAMPLE_TOOL, modernize_1.MODERNIZE_TOOL];
+exports.EXPERIMENTAL_TOOLS = [
+    examples_1.FIND_EXAMPLE_TOOL,
+    modernize_1.MODERNIZE_TOOL,
+    zoneless_migration_1.ZONELESS_MIGRATION_TOOL,
+];
 async function createMcpServer(options, logger) {
     const server = new mcp_js_1.McpServer({
         name: 'angular-cli-server',

package/src/commands/mcp/tools/best-practices.js

@@ -17,11 +17,21 @@ const tool_registry_1 = require("./tool-registry");
 exports.BEST_PRACTICES_TOOL = (0, tool_registry_1.declareTool)({
     name: 'get_best_practices',
     title: 'Get Angular Coding Best Practices Guide',
-    description: 'You **MUST** use this tool to retrieve the Angular Best Practices Guide ' +
-        'before any interaction with Angular code (creating, analyzing, modifying). ' +
-        'It is mandatory to follow this guide to ensure all code adheres to ' +
-        'modern standards, including standalone components, typed forms, and ' +
-        'modern control flow. This is the first step for any Angular task.',
+    description: `
+<Purpose>
+Retrieves the official Angular Best Practices Guide. This guide contains the essential rules and conventions
+that **MUST** be followed for any task involving the creation, analysis, or modification of Angular code.
+</Purpose>
+<Use Cases>
+* As a mandatory first step before writing or modifying any Angular code to ensure adherence to modern standards.
+* To learn about key concepts like standalone components, typed forms, and modern control flow syntax (@if, @for, @switch).
+* To verify that existing code aligns with current Angular conventions before making changes.
+</Use Cases>
+<Operational Notes>
+* The content of this guide is non-negotiable and reflects the official, up-to-date standards for Angular development.
+* You **MUST** internalize and apply the principles from this guide in all subsequent Angular-related tasks.
+* Failure to adhere to these best practices will result in suboptimal and outdated code.
+</Operational Notes>`,
     isReadOnly: true,
     isLocalOnly: true,
     factory: () => {

package/src/commands/mcp/tools/doc-search.d.ts

@@ -9,4 +9,21 @@ import { z } from 'zod';
 export declare const DOC_SEARCH_TOOL: import("./tool-registry").McpToolDeclaration<{
     query: z.ZodString;
     includeTopContent: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
-}, z.ZodRawShape>;
+}, {
+    results: z.ZodArray<z.ZodObject<{
+        title: z.ZodString;
+        breadcrumb: z.ZodString;
+        url: z.ZodString;
+        content: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        title: string;
+        breadcrumb: string;
+        url: string;
+        content?: string | undefined;
+    }, {
+        title: string;
+        breadcrumb: string;
+        url: string;
+        content?: string | undefined;
+    }>, "many">;
+}>;