@schematics/angular 21.0.0-next.1 → 21.0.0-next.3

package/ai-config/schema.json

@@ -20,27 +20,27 @@
           },
           {
             "value": "claude",
-            "label": "Claude                 [ https://docs.anthropic.com/en/docs/claude-code/memory                                 ]"
+            "label": "Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory            ]"
           },
           {
             "value": "cursor",
-            "label": "Cursor                 [ https://docs.cursor.com/en/context/rules                                              ]"
+            "label": "Cursor         [ https://docs.cursor.com/en/context/rules                         ]"
           },
           {
             "value": "gemini",
-            "label": "Gemini                 [ https://ai.google.dev/gemini-api/docs                                                 ]"
+            "label": "Gemini         [ https://ai.google.dev/gemini-api/docs                            ]"
           },
           {
             "value": "copilot",
-            "label": "GitHub Copilot         [ https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions ]"
+            "label": "GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]"
           },
           {
             "value": "jetbrains",
-            "label": "JetBrains AI Assistant [ https://www.jetbrains.com/help/junie/customize-guidelines.html                        ]"
+            "label": "JetBrains AI   [ https://www.jetbrains.com/help/junie/customize-guidelines.html   ]"
           },
           {
             "value": "windsurf",
-            "label": "Windsurf               [ https://docs.windsurf.com/windsurf/cascade/memories#rules                             ]"
+            "label": "Windsurf       [ https://docs.windsurf.com/windsurf/cascade/memories#rules        ]"
           }
         ]
       },

package/application/index.js

@@ -41,6 +41,7 @@ function default_1(options) {
             options.style = schema_1.Style.Css;
         }
         const { appDir, appRootSelector, componentOptions, folderName, sourceDir } = await getAppOptions(host, options);
+        const suffix = options.fileNameStyleGuide === '2016' ? '.component' : '';
         return (0, schematics_1.chain)([
             addAppToWorkspaceFile(options, appDir),
             addTsProjectReference('./' + (0, core_1.join)((0, core_1.normalize)(appDir), 'tsconfig.app.json')),
@@ -81,6 +82,7 @@ function default_1(options) {
                     relativePathToWorkspaceRoot: (0, paths_1.relativePathToWorkspaceRoot)(appDir),
                     appName: options.name,
                     folderName,
+                    suffix,
                 }),
                 (0, schematics_1.move)(appDir),
             ]), schematics_1.MergeStrategy.Overwrite),
@@ -89,7 +91,7 @@ function default_1(options) {
                     ? (0, schematics_1.filter)((path) => !path.endsWith('tsconfig.spec.json.template'))
                     : (0, schematics_1.noop)(),
                 componentOptions.inlineTemplate
-                    ? (0, schematics_1.filter)((path) => !path.endsWith('app.html.template'))
+                    ? (0, schematics_1.filter)((path) => !path.endsWith('app__suffix__.html.template'))
                     : (0, schematics_1.noop)(),
                 (0, schematics_1.applyTemplates)({
                     utils: schematics_1.strings,
@@ -98,6 +100,7 @@ function default_1(options) {
                     relativePathToWorkspaceRoot: (0, paths_1.relativePathToWorkspaceRoot)(appDir),
                     appName: options.name,
                     folderName,
+                    suffix,
                 }),
                 (0, schematics_1.move)(appDir),
             ]), schematics_1.MergeStrategy.Overwrite),
@@ -111,6 +114,7 @@ function default_1(options) {
             isTailwind
                 ? (0, schematics_1.schematic)('tailwind', {
                     project: options.name,
+                    skipInstall: options.skipInstall,
                 })
                 : (0, schematics_1.noop)(),
         ]);
@@ -181,6 +185,18 @@ function addAppToWorkspaceFile(options, appDir) {
             (schematics[`@schematics/angular:${type}`] ??= {}).standalone = false;
         });
     }
+    if (options.fileNameStyleGuide === '2016') {
+        const schematicsWithTypeSymbols = ['component', 'directive', 'service'];
+        schematicsWithTypeSymbols.forEach((type) => {
+            const schematicDefaults = (schematics[`@schematics/angular:${type}`] ??= {});
+            schematicDefaults.type = type;
+            schematicDefaults.addTypeToClassName = false;
+        });
+        const schematicsWithTypeSeparator = ['guard', 'interceptor', 'module', 'pipe', 'resolver'];
+        schematicsWithTypeSeparator.forEach((type) => {
+            (schematics[`@schematics/angular:${type}`] ??= {}).typeSeparator = '.';
+        });
+    }
     const sourceRoot = (0, core_1.join)((0, core_1.normalize)(projectRoot), 'src');
     let budgets = [];
     if (options.strict) {
@@ -317,5 +333,9 @@ function getComponentOptions(options) {
             style: options.style,
             viewEncapsulation: options.viewEncapsulation,
         };
+    if (options.fileNameStyleGuide === '2016') {
+        componentOptions.type = 'component';
+        componentOptions.addTypeToClassName = false;
+    }
     return componentOptions;
 }

package/application/schema.d.ts

@@ -5,6 +5,13 @@
  * routing, styling, and testing.
  */
 export type Schema = {
+    /**
+     * 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.,
@@ -86,6 +93,16 @@ export type Schema = {
      */
     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.
  */

package/application/schema.js

@@ -2,7 +2,18 @@
 // 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.ViewEncapsulation = exports.Style = void 0;
+exports.ViewEncapsulation = exports.Style = exports.FileNameStyleGuide = void 0;
+/**
+ * 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/application/schema.json

@@ -127,6 +127,12 @@
       "x-prompt": "Do you want to create a 'zoneless' application without 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)."
     }
   },
   "required": ["name"]

package/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import <% if(!exportDefault) { %>{ <% }%><%= classify(name) %><%= classify(type) %> <% if(!exportDefault) {%>} <% }%>from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
+import <% if(!exportDefault) { %>{ <% }%><%= classifiedName %> <% if(!exportDefault) {%>} <% }%>from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
 
-describe('<%= classify(name) %><%= classify(type) %>', () => {
-  let component: <%= classify(name) %><%= classify(type) %>;
-  let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
+describe('<%= classifiedName %>', () => {
+  let component: <%= classifiedName %>;
+  let fixture: ComponentFixture<<%= classifiedName %>>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      <%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= classifiedName %>]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
+    fixture = TestBed.createComponent(<%= classifiedName %>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -19,6 +19,6 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export <% if(exportDefault) {%>default <%}%>class <%= classify(name) %><%= classify(type) %> {
+export <% if(exportDefault) {%>default <%}%>class <%= classifiedName %> {
 
 }

package/component/index.js

@@ -37,7 +37,9 @@ exports.default = (0, project_1.createProjectSchematic)((options, { project, tre
     options.path = parsedPath.path;
     options.selector = options.selector || buildSelector(options, (project && project.prefix) || '');
     (0, validation_1.validateHtmlSelector)(options.selector);
-    (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
+    const classifiedName = schematics_1.strings.classify(options.name) +
+        (options.addTypeToClassName && options.type ? schematics_1.strings.classify(options.type) : '');
+    (0, validation_1.validateClassName)(classifiedName);
     const skipStyleFile = options.inlineStyle || options.style === schema_1.Style.None;
     const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
         options.skipTests ? (0, schematics_1.filter)((path) => !path.endsWith('.spec.ts.template')) : (0, schematics_1.noop)(),
@@ -48,6 +50,8 @@ exports.default = (0, project_1.createProjectSchematic)((options, { project, tre
             'if-flat': (s) => (options.flat ? '' : s),
             'ngext': options.ngHtml ? '.ng' : '',
             ...options,
+            // Add a new variable for the classified name, conditionally including the type
+            classifiedName,
         }),
         !options.type
             ? (0, schematics_1.forEach)(((file) => {

package/component/schema.d.ts

@@ -4,6 +4,11 @@
  * optional CSS stylesheet. Use this schematic to generate a new component in your project.
  */
 export type Schema = {
+    /**
+     * 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.
      */

package/component/schema.json

@@ -95,6 +95,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`.",

package/directive/files/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -1,8 +1,8 @@
-import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
+import { <%= classifiedName %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
 
-describe('<%= classify(name) %><%= classify(type) %>', () => {
+describe('<%= classifiedName %>', () => {
   it('should create an instance', () => {
-    const directive = new <%= classify(name) %><%= classify(type) %>();
+    const directive = new <%= classifiedName %>();
     expect(directive).toBeTruthy();
   });
 });

package/directive/files/__name@dasherize__.__type@dasherize__.ts.template

@@ -4,7 +4,7 @@ import { Directive } from '@angular/core';
   selector: '[<%= selector %>]'<% if(!standalone) {%>,
   standalone: false<%}%>
 })
-export class <%= classify(name) %><%= classify(type) %> {
+export class <%= classifiedName %> {
 
   constructor() { }
 

package/directive/index.js

@@ -35,12 +35,17 @@ exports.default = (0, project_1.createProjectSchematic)((options, { project, tre
     options.path = parsedPath.path;
     options.selector = options.selector || buildSelector(options, project.prefix || '');
     (0, validation_1.validateHtmlSelector)(options.selector);
-    (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
+    const classifiedName = schematics_1.strings.classify(options.name) +
+        (options.addTypeToClassName && options.type ? schematics_1.strings.classify(options.type) : '');
+    (0, validation_1.validateClassName)(classifiedName);
     return (0, schematics_1.chain)([
         (0, add_declaration_to_ng_module_1.addDeclarationToNgModule)({
             type: 'directive',
             ...options,
         }),
-        (0, generate_from_files_1.generateFromFiles)(options),
+        (0, generate_from_files_1.generateFromFiles)({
+            ...options,
+            classifiedName,
+        }),
     ]);
 });

package/directive/schema.d.ts

@@ -5,6 +5,11 @@
  * and boilerplate code for a new directive.
  */
 export type Schema = {
+    /**
+     * 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.

package/directive/schema.json

@@ -84,6 +84,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."
     }
   },
   "required": ["name", "project"]

package/ng-new/index.js

@@ -41,6 +41,7 @@ function default_1(options) {
         standalone: options.standalone,
         ssr: options.ssr,
         zoneless: options.zoneless,
+        fileNameStyleGuide: options.fileNameStyleGuide,
     };
     return (0, schematics_1.chain)([
         (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.empty)(), [

package/ng-new/schema.d.ts

@@ -25,6 +25,13 @@ export type Schema = {
      * 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.,
@@ -135,6 +142,16 @@ export type CommitObject = {
     name: string;
     [property: string]: any;
 };
+/**
+ * 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 package manager used to install dependencies.
  */

package/ng-new/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.ViewEncapsulation = exports.Style = exports.PackageManager = exports.AiConfig = void 0;
+exports.ViewEncapsulation = exports.Style = exports.PackageManager = exports.FileNameStyleGuide = exports.AiConfig = void 0;
 var AiConfig;
 (function (AiConfig) {
     AiConfig["Claude"] = "claude";
@@ -13,6 +13,17 @@ var AiConfig;
     AiConfig["None"] = "none";
     AiConfig["Windsurf"] = "windsurf";
 })(AiConfig || (exports.AiConfig = AiConfig = {}));
+/**
+ * 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 package manager used to install dependencies.
  */

package/ng-new/schema.json

@@ -151,6 +151,12 @@
         "type": "string",
         "enum": ["none", "gemini", "copilot", "claude", "cursor", "jetbrains", "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)."
     }
   },
   "required": ["name", "version"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "21.0.0-next.1",
+  "version": "21.0.0-next.3",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -22,15 +22,15 @@
   },
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "21.0.0-next.1",
-    "@angular-devkit/schematics": "21.0.0-next.1",
+    "@angular-devkit/core": "21.0.0-next.3",
+    "@angular-devkit/schematics": "21.0.0-next.3",
     "jsonc-parser": "3.3.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/angular-cli.git"
   },
-  "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/server/files/application-builder/standalone-src/main.server.ts.template

@@ -1,7 +1,8 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
 import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(<%= appComponentName %>, config, context);
 
 export default bootstrap;

package/server/files/server-builder/standalone-src/main.server.ts.template

@@ -1,7 +1,8 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
 import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(<%= appComponentName %>, config, context);
 
 export default bootstrap;

package/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
+import { <%= classifiedName %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
 
-describe('<%= classify(name) %><%= classify(type) %>', () => {
-  let service: <%= classify(name) %><%= classify(type) %>;
+describe('<%= classifiedName %>', () => {
+  let service: <%= classifiedName %>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(<%= classify(name) %><%= classify(type) %>);
+    service = TestBed.inject(<%= classifiedName %>);
   });
 
   it('should be created', () => {

package/service/files/__name@dasherize__.__type@dasherize__.ts.template

@@ -3,6 +3,6 @@ import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root'
 })
-export class <%= classify(name) %><%= classify(type) %> {
+export class <%= classifiedName %> {
   
 }

package/service/index.d.ts

@@ -7,4 +7,5 @@
  */
 import { Rule } from '@angular-devkit/schematics';
 import { Schema as ServiceOptions } from './schema';
-export default function (options: ServiceOptions): Rule;
+declare const _default: (options: ServiceOptions) => Rule;
+export default _default;

package/service/index.js

@@ -7,8 +7,24 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
+const schematics_1 = require("@angular-devkit/schematics");
 const generate_from_files_1 = require("../utility/generate-from-files");
-function default_1(options) {
-    return (0, generate_from_files_1.generateFromFiles)(options);
-}
+const parse_name_1 = require("../utility/parse-name");
+const project_1 = require("../utility/project");
+const validation_1 = require("../utility/validation");
+const workspace_1 = require("../utility/workspace");
+exports.default = (0, project_1.createProjectSchematic)((options, { project, tree }) => {
+    if (options.path === undefined) {
+        options.path = (0, workspace_1.buildDefaultPath)(project);
+    }
+    const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
+    options.name = parsedPath.name;
+    options.path = parsedPath.path;
+    const classifiedName = schematics_1.strings.classify(options.name) +
+        (options.addTypeToClassName && options.type ? schematics_1.strings.classify(options.type) : '');
+    (0, validation_1.validateClassName)(classifiedName);
+    return (0, generate_from_files_1.generateFromFiles)({
+        ...options,
+        classifiedName,
+    });
+});

package/service/schema.d.ts

@@ -4,6 +4,11 @@
  * process of generating a new service with the necessary files and boilerplate code.
  */
 export type Schema = {
+    /**
+     * 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/service/schema.json

@@ -43,6 +43,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."
     }
   },
   "required": ["name", "project"]

package/tailwind/index.d.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import { type Rule } from '@angular-devkit/schematics';
-declare const _default: (options: {
-    project: string;
-}) => Rule;
+import { Schema as TailwindOptions } from './schema';
+declare const _default: (options: TailwindOptions) => Rule;
 export default _default;

package/tailwind/index.js

@@ -6,46 +6,101 @@
  * 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 });
 const schematics_1 = require("@angular-devkit/schematics");
+const node_assert_1 = __importDefault(require("node:assert"));
+const posix_1 = require("node:path/posix");
 const utility_1 = require("../utility");
+const json_file_1 = require("../utility/json-file");
 const latest_versions_1 = require("../utility/latest-versions");
 const project_1 = require("../utility/project");
 const TAILWIND_DEPENDENCIES = ['tailwindcss', '@tailwindcss/postcss', 'postcss'];
-function addTailwindImport(stylesheetPath) {
-    return (tree) => {
-        let stylesheetText = '';
-        if (tree.exists(stylesheetPath)) {
-            stylesheetText = tree.readText(stylesheetPath);
-            stylesheetText += '\n';
+const POSTCSS_CONFIG_FILES = ['.postcssrc.json', 'postcss.config.json'];
+function addTailwindStyles(options, project) {
+    return async (tree) => {
+        const buildTarget = project.targets.get('build');
+        if (!buildTarget) {
+            throw new schematics_1.SchematicsException(`Project "${options.project}" does not have a build target.`);
+        }
+        const styles = buildTarget.options?.['styles'];
+        let stylesheetPath;
+        if (styles) {
+            stylesheetPath = styles
+                .map((s) => (typeof s === 'string' ? s : s.input))
+                .find((p) => p.endsWith('.css'));
+        }
+        if (!stylesheetPath) {
+            const newStylesheetPath = (0, posix_1.join)(project.sourceRoot ?? 'src', 'tailwind.css');
+            tree.create(newStylesheetPath, '@import "tailwindcss";\n');
+            return (0, utility_1.updateWorkspace)((workspace) => {
+                const project = workspace.projects.get(options.project);
+                if (project) {
+                    const buildTarget = project.targets.get('build');
+                    (0, node_assert_1.default)(buildTarget, 'Build target should still be present');
+                    // Update main styles
+                    const buildOptions = buildTarget.options;
+                    (0, node_assert_1.default)(buildOptions, 'Build options should still be present');
+                    const existingStyles = buildOptions['styles'] ?? [];
+                    buildOptions['styles'] = [newStylesheetPath, ...existingStyles];
+                    // Update configuration styles
+                    if (buildTarget.configurations) {
+                        for (const config of Object.values(buildTarget.configurations)) {
+                            if (config && 'styles' in config) {
+                                const existingStyles = config['styles'] ?? [];
+                                config['styles'] = [newStylesheetPath, ...existingStyles];
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        else {
+            let stylesheetContent = tree.readText(stylesheetPath);
+            if (!stylesheetContent.includes('@import "tailwindcss";')) {
+                stylesheetContent += '\n@import "tailwindcss";\n';
+                tree.overwrite(stylesheetPath, stylesheetContent);
+            }
         }
-        stylesheetText += '@import "tailwindcss";\n';
-        tree.overwrite(stylesheetPath, stylesheetText);
+    };
+}
+function managePostCssConfiguration(project) {
+    return async (tree) => {
+        const searchPaths = ['/', project.root]; // Workspace root and project root
+        for (const path of searchPaths) {
+            for (const configFile of POSTCSS_CONFIG_FILES) {
+                const fullPath = (0, posix_1.join)(path, configFile);
+                if (tree.exists(fullPath)) {
+                    const postcssConfig = new json_file_1.JSONFile(tree, fullPath);
+                    const tailwindPluginPath = ['plugins', '@tailwindcss/postcss'];
+                    if (postcssConfig.get(tailwindPluginPath) === undefined) {
+                        postcssConfig.modify(tailwindPluginPath, {});
+                    }
+                    // Config found and handled
+                    return;
+                }
+            }
+        }
+        // No existing config found, so create one from the template
+        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
+            (0, schematics_1.applyTemplates)({
+                ...schematics_1.strings,
+            }),
+            (0, schematics_1.move)(project.root),
+        ]);
+        return (0, schematics_1.mergeWith)(templateSource);
     };
 }
 exports.default = (0, project_1.createProjectSchematic)((options, { project }) => {
-    const buildTarget = project.targets.get('build');
-    if (!buildTarget) {
-        throw new schematics_1.SchematicsException(`Project "${options.project}" does not have a build target.`);
-    }
-    const styles = buildTarget.options?.['styles'];
-    if (!styles || styles.length === 0) {
-        throw new schematics_1.SchematicsException(`Project "${options.project}" does not have any global styles.`);
-    }
-    const stylesheetPath = styles[0];
-    const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
-        (0, schematics_1.applyTemplates)({
-            ...schematics_1.strings,
-            ...options,
-        }),
-        (0, schematics_1.move)(project.root),
-    ]);
     return (0, schematics_1.chain)([
-        addTailwindImport(stylesheetPath),
-        (0, schematics_1.mergeWith)(templateSource),
+        addTailwindStyles(options, project),
+        managePostCssConfiguration(project),
         ...TAILWIND_DEPENDENCIES.map((name) => (0, utility_1.addDependency)(name, latest_versions_1.latestVersions[name], {
             type: utility_1.DependencyType.Dev,
             existing: utility_1.ExistingBehavior.Skip,
+            install: options.skipInstall ? utility_1.InstallBehavior.None : utility_1.InstallBehavior.Auto,
         })),
     ]);
 });

package/tailwind/schema.d.ts

@@ -3,5 +3,10 @@ export type Schema = {
      * The name of the project.
      */
     project: string;
+    /**
+     * Skip the automatic installation of packages. You will need to manually install the
+     * dependencies later.
+     */
+    skipInstall?: boolean;
     [property: string]: any;
 };

package/tailwind/schema.json

@@ -9,6 +9,11 @@
       "$default": {
         "$source": "projectName"
       }
+    },
+    "skipInstall": {
+      "description": "Skip the automatic installation of packages. You will need to manually install the dependencies later.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["project"]

package/utility/ast-utils.js

@@ -115,6 +115,7 @@ function insertImport(source, fileToEdit, symbolName, fileName, isDefault = fals
         ` from '${fileName}'${insertAtBeginning ? `;${eol}` : ''}`;
     return insertAfterLastOccurrence(allImports, toInsert, fileToEdit, fallbackPos, ts.SyntaxKind.StringLiteral);
 }
+const findNodesCache = new WeakMap();
 function findNodes(node, kindOrGuard, max = Infinity, recursive = false) {
     if (!node || max == 0) {
         return [];
@@ -122,6 +123,13 @@ function findNodes(node, kindOrGuard, max = Infinity, recursive = false) {
     const test = typeof kindOrGuard === 'function'
         ? kindOrGuard
         : (node) => node.kind === kindOrGuard;
+    // Caching is only supported for the entire file
+    if (ts.isSourceFile(node)) {
+        const sourceFileCache = findNodesCache.get(node);
+        if (sourceFileCache?.has(kindOrGuard)) {
+            return sourceFileCache.get(kindOrGuard);
+        }
+    }
     const arr = [];
     if (test(node)) {
         arr.push(node);
@@ -140,6 +148,14 @@ function findNodes(node, kindOrGuard, max = Infinity, recursive = false) {
             }
         }
     }
+    if (ts.isSourceFile(node)) {
+        let sourceFileCache = findNodesCache.get(node);
+        if (!sourceFileCache) {
+            sourceFileCache = new Map();
+            findNodesCache.set(node, sourceFileCache);
+        }
+        sourceFileCache.set(kindOrGuard, arr);
+    }
     return arr;
 }
 /**
@@ -149,17 +165,12 @@ function findNodes(node, kindOrGuard, max = Infinity, recursive = false) {
  */
 function getSourceNodes(sourceFile) {
     const nodes = [sourceFile];
-    const result = [];
-    while (nodes.length > 0) {
-        const node = nodes.shift();
-        if (node) {
-            result.push(node);
-            if (node.getChildCount(sourceFile) >= 0) {
-                nodes.unshift(...node.getChildren());
-            }
-        }
+    // NOTE: nodes.length changes inside of the loop but we only append to the end
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        nodes.push(...node.getChildren(sourceFile));
     }
-    return result;
+    return nodes;
 }
 function findNode(node, kind, text) {
     if (node.kind === kind && node.getText() === text) {

package/utility/generate-from-files.d.ts

@@ -15,5 +15,6 @@ export interface GenerateFromFilesOptions {
     skipTests?: boolean;
     templateFilesDirectory?: string;
     type?: string;
+    classifiedName?: string;
 }
 export declare function generateFromFiles(options: GenerateFromFilesOptions, extraTemplateValues?: Record<string, string | ((v: string) => string)>): Rule;

package/utility/latest-versions/package.json

@@ -8,7 +8,7 @@
     "@types/node": "^20.17.19",
     "browser-sync": "^3.0.0",
     "express": "^5.1.0",
-    "jasmine-core": "~5.9.0",
+    "jasmine-core": "~5.10.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

package/utility/latest-versions.js

@@ -16,7 +16,7 @@ exports.latestVersions = {
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
     Angular: '^21.0.0-next.0',
     NgPackagr: '^21.0.0-next.0',
-    DevkitBuildAngular: '^21.0.0-next.1',
-    AngularBuild: '^21.0.0-next.1',
-    AngularSSR: '^21.0.0-next.1',
+    DevkitBuildAngular: '^21.0.0-next.3',
+    AngularBuild: '^21.0.0-next.3',
+    AngularSSR: '^21.0.0-next.3',
 };

package/workspace/files/tsconfig.json.template

@@ -19,7 +19,6 @@
     "enableI18nLegacyMessageIdFormat": false<% if (strict) { %>,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "typeCheckHostBindings": true,
     "strictTemplates": true<% } %>
   },
   "files": []