diff --git a/packages/schematics/angular/application/files/common-files/src/app/app.html.template b/packages/schematics/angular/application/files/common-files/src/app/app__suffix__.html.template similarity index 100% rename from packages/schematics/angular/application/files/common-files/src/app/app.html.template rename to packages/schematics/angular/application/files/common-files/src/app/app__suffix__.html.template diff --git a/packages/schematics/angular/application/files/module-files/src/app/app.spec.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template similarity index 100% rename from packages/schematics/angular/application/files/module-files/src/app/app.spec.ts.template rename to packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template diff --git a/packages/schematics/angular/application/files/module-files/src/app/app.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template similarity index 100% rename from packages/schematics/angular/application/files/module-files/src/app/app.ts.template rename to packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.spec.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template similarity index 100% rename from packages/schematics/angular/application/files/standalone-files/src/app/app.spec.ts.template rename to packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.ts.template similarity index 100% rename from packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template rename to packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.ts.template diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts index 013021dd896f..5620e4a12f04 100644 --- a/packages/schematics/angular/application/index.ts +++ b/packages/schematics/angular/application/index.ts @@ -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,20 @@ 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; + schematicDefaults.addTypeToClassName = false; + }); + + 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 +407,10 @@ function getComponentOptions(options: ApplicationOptions): Partial{ <% }%><%= 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(); }); diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template index b4810e6a24e0..c914d8a06628 100644 --- a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template +++ b/packages/schematics/angular/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 %> { } diff --git a/packages/schematics/angular/component/index.ts b/packages/schematics/angular/component/index.ts index da79e750400e..1d98f616de37 100644 --- a/packages/schematics/angular/component/index.ts +++ b/packages/schematics/angular/component/index.ts @@ -54,7 +54,11 @@ export default createProjectSchematic((options, { project, tre options.selector = options.selector || buildSelector(options, (project && project.prefix) || ''); validateHtmlSelector(options.selector); - validateClassName(strings.classify(options.name)); + + const classifiedName = + strings.classify(options.name) + + (options.addTypeToClassName && options.type ? strings.classify(options.type) : ''); + validateClassName(classifiedName); const skipStyleFile = options.inlineStyle || options.style === Style.None; const templateSource = apply(url('./files'), [ @@ -66,6 +70,8 @@ export default createProjectSchematic((options, { project, tre 'if-flat': (s: string) => (options.flat ? '' : s), 'ngext': options.ngHtml ? '.ng' : '', ...options, + // Add a new variable for the classified name, conditionally including the type + classifiedName, }), !options.type ? forEach(((file) => { diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts index 9140dfcba43f..7b5217c71ea5 100644 --- a/packages/schematics/angular/component/index_spec.ts +++ b/packages/schematics/angular/component/index_spec.ts @@ -163,7 +163,7 @@ describe('Component Schematic', () => { await expectAsync( schematicRunner.runSchematic('component', options, appTree), - ).toBeRejectedWithError('Class name "404" is invalid.'); + ).toBeRejectedWithError('Class name "404Component" is invalid.'); }); it('should allow dash in selector before a number', async () => { diff --git a/packages/schematics/angular/component/schema.json b/packages/schematics/angular/component/schema.json index 23c89d7ec5e2..eaa2c95f197b 100644 --- a/packages/schematics/angular/component/schema.json +++ b/packages/schematics/angular/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`.", diff --git a/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.spec.ts.template b/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.spec.ts.template index 59bddc63660a..b6bc80e99be6 100644 --- a/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.spec.ts.template +++ b/packages/schematics/angular/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(); }); }); diff --git a/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.ts.template index 4e55f9d19e6b..f6c2ba006be3 100644 --- a/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.ts.template +++ b/packages/schematics/angular/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() { } diff --git a/packages/schematics/angular/directive/index.ts b/packages/schematics/angular/directive/index.ts index 0a230b8cbeeb..bfe87129bb79 100644 --- a/packages/schematics/angular/directive/index.ts +++ b/packages/schematics/angular/directive/index.ts @@ -39,7 +39,10 @@ export default createProjectSchematic((options, { project, tre options.selector = options.selector || buildSelector(options, project.prefix || ''); validateHtmlSelector(options.selector); - validateClassName(strings.classify(options.name)); + const classifiedName = + strings.classify(options.name) + + (options.addTypeToClassName && options.type ? strings.classify(options.type) : ''); + validateClassName(classifiedName); return chain([ addDeclarationToNgModule({ @@ -47,6 +50,9 @@ export default createProjectSchematic((options, { project, tre ...options, }), - generateFromFiles(options), + generateFromFiles({ + ...options, + classifiedName, + }), ]); }); diff --git a/packages/schematics/angular/directive/index_spec.ts b/packages/schematics/angular/directive/index_spec.ts index e5dd8dd058df..870d8f0c78e0 100644 --- a/packages/schematics/angular/directive/index_spec.ts +++ b/packages/schematics/angular/directive/index_spec.ts @@ -137,6 +137,35 @@ describe('Directive Schematic', () => { expect(testContent).toContain("describe('Foo'"); }); + it('should not add type to class name when addTypeToClassName is false', async () => { + const options = { ...defaultOptions, type: 'Directive', addTypeToClassName: false }; + const tree = await schematicRunner.runSchematic('directive', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo.directive.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo.directive.spec.ts'); + expect(content).toContain('export class Foo {'); + expect(content).not.toContain('export class FooDirective {'); + expect(testContent).toContain("describe('Foo', () => {"); + expect(testContent).not.toContain("describe('FooDirective', () => {"); + }); + + it('should add type to class name when addTypeToClassName is true', async () => { + const options = { ...defaultOptions, type: 'Directive', addTypeToClassName: true }; + const tree = await schematicRunner.runSchematic('directive', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo.directive.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo.directive.spec.ts'); + expect(content).toContain('export class FooDirective {'); + expect(testContent).toContain("describe('FooDirective', () => {"); + }); + + it('should add type to class name by default', async () => { + const options = { ...defaultOptions, type: 'Directive', addTypeToClassName: undefined }; + const tree = await schematicRunner.runSchematic('directive', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo.directive.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo.directive.spec.ts'); + expect(content).toContain('export class FooDirective {'); + expect(testContent).toContain("describe('FooDirective', () => {"); + }); + describe('standalone=false', () => { const defaultNonStandaloneOptions: DirectiveOptions = { ...defaultOptions, diff --git a/packages/schematics/angular/directive/schema.json b/packages/schematics/angular/directive/schema.json index 4a4041604fb0..6d672fc4fdeb 100644 --- a/packages/schematics/angular/directive/schema.json +++ b/packages/schematics/angular/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"] diff --git a/packages/schematics/angular/ng-new/index.ts b/packages/schematics/angular/ng-new/index.ts index 4ba4f3d48830..019a193290bd 100644 --- a/packages/schematics/angular/ng-new/index.ts +++ b/packages/schematics/angular/ng-new/index.ts @@ -58,6 +58,7 @@ export default function (options: NgNewOptions): Rule { standalone: options.standalone, ssr: options.ssr, zoneless: options.zoneless, + fileNameStyleGuide: options.fileNameStyleGuide, }; return chain([ diff --git a/packages/schematics/angular/ng-new/index_spec.ts b/packages/schematics/angular/ng-new/index_spec.ts index 30e4718a4bd1..50d9abf04191 100644 --- a/packages/schematics/angular/ng-new/index_spec.ts +++ b/packages/schematics/angular/ng-new/index_spec.ts @@ -128,4 +128,42 @@ 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('.'); + }); + + it(`should not add type to class name when file name style guide is '2016'`, async () => { + const options = { ...defaultOptions, fileNameStyleGuide: '2016' }; + + const tree = await schematicRunner.runSchematic('ng-new', options); + const appComponentContent = tree.readContent('/bar/src/app/app.component.ts'); + expect(appComponentContent).toContain('export class App {'); + expect(appComponentContent).not.toContain('export class AppComponent {'); + }); }); diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json index 9120e2a15c8b..5f13e4b26d70 100644 --- a/packages/schematics/angular/ng-new/schema.json +++ b/packages/schematics/angular/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"] diff --git a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template b/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template index a57a4e043b4b..168bb9ef23f2 100644 --- a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template +++ b/packages/schematics/angular/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', () => { diff --git a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.ts.template index 5c104786d178..584a706c6ca1 100644 --- a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.ts.template +++ b/packages/schematics/angular/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 %> { } diff --git a/packages/schematics/angular/service/index.ts b/packages/schematics/angular/service/index.ts index 640661a2addc..48558dcc0d3a 100644 --- a/packages/schematics/angular/service/index.ts +++ b/packages/schematics/angular/service/index.ts @@ -6,10 +6,30 @@ * found in the LICENSE file at https://angular.dev/license */ -import { Rule } from '@angular-devkit/schematics'; +import { Rule, strings } from '@angular-devkit/schematics'; import { generateFromFiles } from '../utility/generate-from-files'; +import { parseName } from '../utility/parse-name'; +import { createProjectSchematic } from '../utility/project'; +import { validateClassName } from '../utility/validation'; +import { buildDefaultPath } from '../utility/workspace'; import { Schema as ServiceOptions } from './schema'; -export default function (options: ServiceOptions): Rule { - return generateFromFiles(options); -} +export default createProjectSchematic((options, { project, tree }) => { + if (options.path === undefined) { + options.path = buildDefaultPath(project); + } + + const parsedPath = parseName(options.path, options.name); + options.name = parsedPath.name; + options.path = parsedPath.path; + + const classifiedName = + strings.classify(options.name) + + (options.addTypeToClassName && options.type ? strings.classify(options.type) : ''); + validateClassName(classifiedName); + + return generateFromFiles({ + ...options, + classifiedName, + }); +}); diff --git a/packages/schematics/angular/service/index_spec.ts b/packages/schematics/angular/service/index_spec.ts index b5a6856e1504..760cec6b0f7f 100644 --- a/packages/schematics/angular/service/index_spec.ts +++ b/packages/schematics/angular/service/index_spec.ts @@ -92,4 +92,33 @@ describe('Service Schematic', () => { expect(content).toContain('export class Foo'); expect(testContent).toContain("describe('Foo'"); }); + + it('should not add type to class name when addTypeToClassName is false', async () => { + const options = { ...defaultOptions, type: 'Service', addTypeToClassName: false }; + const tree = await schematicRunner.runSchematic('service', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo/foo.service.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo/foo.service.spec.ts'); + expect(content).toContain('export class Foo {'); + expect(content).not.toContain('export class FooService {'); + expect(testContent).toContain("describe('Foo', () => {"); + expect(testContent).not.toContain("describe('FooService', () => {"); + }); + + it('should add type to class name when addTypeToClassName is true', async () => { + const options = { ...defaultOptions, type: 'Service', addTypeToClassName: true }; + const tree = await schematicRunner.runSchematic('service', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo/foo.service.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo/foo.service.spec.ts'); + expect(content).toContain('export class FooService {'); + expect(testContent).toContain("describe('FooService', () => {"); + }); + + it('should add type to class name by default', async () => { + const options = { ...defaultOptions, type: 'Service', addTypeToClassName: undefined }; + const tree = await schematicRunner.runSchematic('service', options, appTree); + const content = tree.readContent('/projects/bar/src/app/foo/foo.service.ts'); + const testContent = tree.readContent('/projects/bar/src/app/foo/foo.service.spec.ts'); + expect(content).toContain('export class FooService {'); + expect(testContent).toContain("describe('FooService', () => {"); + }); }); diff --git a/packages/schematics/angular/service/schema.json b/packages/schematics/angular/service/schema.json index 29f5474e68dd..19afac150262 100644 --- a/packages/schematics/angular/service/schema.json +++ b/packages/schematics/angular/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"] diff --git a/packages/schematics/angular/utility/generate-from-files.ts b/packages/schematics/angular/utility/generate-from-files.ts index 3f3547d5e6e2..23321ac2a6a2 100644 --- a/packages/schematics/angular/utility/generate-from-files.ts +++ b/packages/schematics/angular/utility/generate-from-files.ts @@ -34,6 +34,7 @@ export interface GenerateFromFilesOptions { skipTests?: boolean; templateFilesDirectory?: string; type?: string; + classifiedName?: string; } export function generateFromFiles(

AltStyle によって変換されたページ (->オリジナル) /