feat(@schematics/angular): support different file name style guides in ng new

Introduces the ability to configure the file naming convention for generated files directly within the `ng new` schematic. This allows users to create new workspaces that adhere to the 2016 style guide conventions, as an alternative to the default 2025 style guide. For more information, see the Angular Style Guide (https://angular.dev/style-guide).

When a user runs `ng new --file-name-style-guide 2016`:
- The `ng-new` schematic passes the style guide option down to the `application` sub-schematic.
- The `application` schematic configures the `schematics` section of the new `angular.json` to use the 2016 naming conventions for future `ng generate` commands.
- The `application` schematic generates the initial application files with the appropriate suffixes (e.g., `app.component.ts`).

This addresses community feedback requesting a way to maintain the previous file naming structure for consistency in existing projects and workflows.

Fixes #30594

Author: clydin

packages/schematics/angular/application/files/common-files/src/app/app.html.template renamed to packages/schematics/angular/application/files/common-files/src/app/app__suffix__.html.template

@@ -67,6 +67,8 @@ export default function (options: ApplicationOptions): Rule {
     const { appDir, appRootSelector, componentOptions, folderName, sourceDir } =
       await getAppOptions(host, options);
 
+    const suffix = options.fileNameStyleGuide === '2016' ? '.component' : '';
+
     return chain([
       addAppToWorkspaceFile(options, appDir),
       addTsProjectReference('./' + join(normalize(appDir), 'tsconfig.app.json')),
@@ -108,6 +110,7 @@ export default function (options: ApplicationOptions): Rule {
             relativePathToWorkspaceRoot: relativePathToWorkspaceRoot(appDir),
             appName: options.name,
             folderName,
+            suffix,
           }),
           move(appDir),
         ]),
@@ -119,7 +122,7 @@ export default function (options: ApplicationOptions): Rule {
             ? filter((path) => !path.endsWith('tsconfig.spec.json.template'))
             : noop(),
           componentOptions.inlineTemplate
-            ? filter((path) => !path.endsWith('app.html.template'))
+            ? filter((path) => !path.endsWith('app__suffix__.html.template'))
             : noop(),
           applyTemplates({
             utils: strings,
@@ -128,6 +131,7 @@ export default function (options: ApplicationOptions): Rule {
             relativePathToWorkspaceRoot: relativePathToWorkspaceRoot(appDir),
             appName: options.name,
             folderName,
+            suffix,
           }),
           move(appDir),
         ]),
@@ -233,6 +237,19 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
     });
   }
 
+  if (options.fileNameStyleGuide === '2016') {
+    const schematicsWithTypeSymbols = ['component', 'directive', 'service'];
+    schematicsWithTypeSymbols.forEach((type) => {
+      const schematicDefaults = (schematics[`@schematics/angular:${type}`] ??= {}) as JsonObject;
+      schematicDefaults.type = type;
+    });
+
+    const schematicsWithTypeSeparator = ['guard', 'interceptor', 'module', 'pipe', 'resolver'];
+    schematicsWithTypeSeparator.forEach((type) => {
+      ((schematics[`@schematics/angular:${type}`] ??= {}) as JsonObject).typeSeparator = '.';
+    });
+  }
+
   const sourceRoot = join(normalize(projectRoot), 'src');
   let budgets: { type: string; maximumWarning: string; maximumError: string }[] = [];
   if (options.strict) {
@@ -389,5 +406,9 @@ function getComponentOptions(options: ApplicationOptions): Partial<ComponentOpti
         viewEncapsulation: options.viewEncapsulation,
       };
 
+  if (options.fileNameStyleGuide === '2016') {
+    componentOptions.type = 'component';
+  }
+
   return componentOptions;
 }

packages/schematics/angular/application/files/module-files/src/app/app.spec.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template

@@ -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"]

packages/schematics/angular/application/files/module-files/src/app/app.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template

@@ -58,6 +58,7 @@ export default function (options: NgNewOptions): Rule {
     standalone: options.standalone,
     ssr: options.ssr,
     zoneless: options.zoneless,
+    fileNameStyleGuide: options.fileNameStyleGuide,
   };
 
   return chain([

packages/schematics/angular/application/files/standalone-files/src/app/app.spec.ts.template renamed to packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template

@@ -128,4 +128,33 @@ describe('Ng New Schematic', () => {
     const stylesContent = tree.readContent('/bar/src/styles.css');
     expect(stylesContent).toContain('@import "tailwindcss";');
   });
+
+  it(`should create files with file name style guide '2016'`, async () => {
+    const options = { ...defaultOptions, fileNameStyleGuide: '2016' };
+
+    const tree = await schematicRunner.runSchematic('ng-new', options);
+    const files = tree.files;
+    expect(files).toEqual(
+      jasmine.arrayContaining([
+        '/bar/src/app/app.component.css',
+        '/bar/src/app/app.component.html',
+        '/bar/src/app/app.component.spec.ts',
+        '/bar/src/app/app.component.ts',
+      ]),
+    );
+
+    const {
+      projects: {
+        'foo': { schematics },
+      },
+    } = JSON.parse(tree.readContent('/bar/angular.json'));
+    expect(schematics['@schematics/angular:component'].type).toBe('component');
+    expect(schematics['@schematics/angular:directive'].type).toBe('directive');
+    expect(schematics['@schematics/angular:service'].type).toBe('service');
+    expect(schematics['@schematics/angular:guard'].typeSeparator).toBe('.');
+    expect(schematics['@schematics/angular:interceptor'].typeSeparator).toBe('.');
+    expect(schematics['@schematics/angular:module'].typeSeparator).toBe('.');
+    expect(schematics['@schematics/angular:pipe'].typeSeparator).toBe('.');
+    expect(schematics['@schematics/angular:resolver'].typeSeparator).toBe('.');
+  });
 });

packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template renamed to packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.ts.template

@@ -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"]