fix(@schematics/angular): generate guards with a dash type separator

To align with the updated style guide, Angular v20 will generate guards
with file extension `guard` type prefixed with a `-` separator instead of
a `.` by default. Projects will automatically use this naming convention.
Projects can however opt-out by setting the `typeSeparator` option to `.`
for the guard schematic. This can be done as a default in the `angular.json`
or directly on the commandline via `--type-separator=.` when executing `ng generate`.
As an example, `example.guard.ts` will now be named `example-guard.ts`.
The TypeScript declaration will continue to contain `Guard` such as with `ExampleGuard`.

Author: clydin

packages/schematics/angular/guard/implements-files/__name@dasherize__.guard.spec.ts.template renamed to packages/schematics/angular/guard/implements-files/__name@dasherize____typeSeparator__guard.spec.ts.template

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-import { <%= classify(name) %>Guard } from './<%= dasherize(name) %>.guard';
+import { <%= classify(name) %>Guard } from './<%= dasherize(name) %><%= typeSeparator %>guard';
 
 describe('<%= classify(name) %>Guard', () => {
   let guard: <%= classify(name) %>Guard;

packages/schematics/angular/guard/implements-files/__name@dasherize__.guard.ts.template renamed to packages/schematics/angular/guard/implements-files/__name@dasherize____typeSeparator__guard.ts.template

@@ -51,40 +51,62 @@ describe('Guard Schematic', () => {
     );
 
     const files = tree.files;
-    expect(files).toContain('/projects/bar/src/app/foo.guard.spec.ts');
-    expect(files).toContain('/projects/bar/src/app/foo.guard.ts');
+    expect(files).toContain('/projects/bar/src/app/foo-guard.spec.ts');
+    expect(files).toContain('/projects/bar/src/app/foo-guard.ts');
   });
 
   it('should respect the skipTests flag', async () => {
     const options = { ...defaultOptions, skipTests: true };
 
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
     const files = tree.files;
-    expect(files).not.toContain('/projects/bar/src/app/foo.guard.spec.ts');
+    expect(files).not.toContain('/projects/bar/src/app/foo-guard.spec.ts');
+    expect(files).toContain('/projects/bar/src/app/foo-guard.ts');
+  });
+
+  it('should use a `.` type separator when specified', async () => {
+    const options = { ...defaultOptions, typeSeparator: '.' };
+
+    const tree = await schematicRunner.runSchematic('guard', options, appTree);
+    const files = tree.files;
+    expect(files).toContain('/projects/bar/src/app/foo.guard.spec.ts');
     expect(files).toContain('/projects/bar/src/app/foo.guard.ts');
+    const specContent = tree.readContent('/projects/bar/src/app/foo.guard.spec.ts');
+    expect(specContent).toContain(`'./foo.guard'`);
+  });
+
+  it('should use a `-` type separator when specified', async () => {
+    const options = { ...defaultOptions, typeSeparator: '-' };
+
+    const tree = await schematicRunner.runSchematic('guard', options, appTree);
+    const files = tree.files;
+    expect(files).toContain('/projects/bar/src/app/foo-guard.spec.ts');
+    expect(files).toContain('/projects/bar/src/app/foo-guard.ts');
+    const specContent = tree.readContent('/projects/bar/src/app/foo-guard.spec.ts');
+    expect(specContent).toContain(`'./foo-guard'`);
   });
 
   it('should respect the flat flag', async () => {
     const options = { ...defaultOptions, flat: false };
 
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
     const files = tree.files;
-    expect(files).toContain('/projects/bar/src/app/foo/foo.guard.spec.ts');
-    expect(files).toContain('/projects/bar/src/app/foo/foo.guard.ts');
+    expect(files).toContain('/projects/bar/src/app/foo/foo-guard.spec.ts');
+    expect(files).toContain('/projects/bar/src/app/foo/foo-guard.ts');
   });
 
   it('should respect the sourceRoot value', async () => {
     const config = JSON.parse(appTree.readContent('/angular.json'));
     config.projects.bar.sourceRoot = 'projects/bar/custom';
     appTree.overwrite('/angular.json', JSON.stringify(config, null, 2));
     appTree = await schematicRunner.runSchematic('guard', defaultOptions, appTree);
-    expect(appTree.files).toContain('/projects/bar/custom/app/foo.guard.ts');
+    expect(appTree.files).toContain('/projects/bar/custom/app/foo-guard.ts');
   });
 
   it('should respect the implements value', async () => {
     const options = { ...defaultOptions, implements: ['CanActivate'], functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     expect(fileString).toContain('CanActivate');
     expect(fileString).toContain('canActivate');
     expect(fileString).not.toContain('CanActivateChild');
@@ -96,7 +118,7 @@ describe('Guard Schematic', () => {
   it('should generate a functional guard by default', async () => {
     const options = { ...defaultOptions, implements: ['CanActivate'] };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     expect(fileString).toContain('export const fooGuard: CanActivateFn = (route, state) => {');
     expect(fileString).not.toContain('CanActivateChild');
     expect(fileString).not.toContain('canActivateChild');
@@ -107,7 +129,7 @@ describe('Guard Schematic', () => {
   it('should generate a helper function to execute the guard in a test', async () => {
     const options = { ...defaultOptions, implements: ['CanActivate'] };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.spec.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.spec.ts');
     expect(fileString).toContain('const executeGuard: CanActivateFn = (...guardParameters) => ');
     expect(fileString).toContain(
       'TestBed.runInInjectionContext(() => fooGuard(...guardParameters));',
@@ -117,7 +139,7 @@ describe('Guard Schematic', () => {
   it('should generate CanDeactivateFn with unknown functional guard', async () => {
     const options = { ...defaultOptions, implements: ['CanDeactivate'] };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     expect(fileString).toContain(
       'export const fooGuard: CanDeactivateFn<unknown> = ' +
         '(component, currentRoute, currentState, nextState) => {',
@@ -128,7 +150,7 @@ describe('Guard Schematic', () => {
     const implementationOptions = ['CanActivate', 'CanDeactivate', 'CanActivateChild'];
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
 
     // Should contain all implementations
     implementationOptions.forEach((implementation: string) => {
@@ -142,7 +164,7 @@ describe('Guard Schematic', () => {
     const implementationOptions = ['CanMatch'];
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     const expectedImports = `import { CanMatch, GuardResult, MaybeAsync, Route, subPath } from '@angular/router';`;
 
     expect(fileString).toContain(expectedImports);
@@ -152,7 +174,7 @@ describe('Guard Schematic', () => {
     const implementationOptions = ['CanActivate'];
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     const expectedImports =
       `import { ActivatedRouteSnapshot, CanActivate, GuardResult, ` +
       `MaybeAsync, RouterStateSnapshot } from '@angular/router';`;
@@ -163,7 +185,7 @@ describe('Guard Schematic', () => {
   it('should add correct imports based on canActivate functional guard', async () => {
     const options = { ...defaultOptions, implements: ['CanActivate'] };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     const expectedImports = `import { CanActivateFn } from '@angular/router';`;
 
     expect(fileString).toContain(expectedImports);
@@ -173,7 +195,7 @@ describe('Guard Schematic', () => {
     const implementationOptions = ['CanActivate', 'CanMatch', 'CanActivateChild'];
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
-    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const fileString = tree.readContent('/projects/bar/src/app/foo-guard.ts');
     const expectedImports =
       `import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanMatch, GuardResult, ` +
       `MaybeAsync, Route, RouterStateSnapshot, subPath } from '@angular/router';`;

packages/schematics/angular/guard/index_spec.ts

@@ -58,6 +58,11 @@
       },
       "default": ["CanActivate"],
       "x-prompt": "Which type of guard would you like to create?"
+    },
+    "typeSeparator": {
+      "type": "string",
+      "default": "-",
+      "enum": ["-", "."]
     }
   },
   "required": ["name", "project"]

packages/schematics/angular/guard/schema.json

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { <%= guardType %> } from '@angular/router';
 
-import { <%= camelize(name) %>Guard } from './<%= dasherize(name) %>.guard';
+import { <%= camelize(name) %>Guard } from './<%= dasherize(name) %><%= typeSeparator %>guard';
 
 describe('<%= camelize(name) %>Guard', () => {
   const executeGuard: <%= guardType %><% if (guardType === 'CanDeactivateFn') { %><unknown><% } %> = (...guardParameters) => 

packages/schematics/angular/guard/type-files/__name@dasherize__.guard.spec.ts.template renamed to packages/schematics/angular/guard/type-files/__name@dasherize____typeSeparator__guard.spec.ts.template

@@ -6,13 +6,10 @@ export default async function () {
   // Does not create a sub directory.
   const guardDir = join('src', 'app');
 
-  await ng('generate', 'guard', 'test-guard');
+  await ng('generate', 'guard', 'test');
   await expectFileToExist(guardDir);
-  await expectFileToExist(join(guardDir, 'test-guard.guard.ts'));
-  await expectFileToMatch(
-    join(guardDir, 'test-guard.guard.ts'),
-    /export const testGuardGuard: CanActivateFn/,
-  );
-  await expectFileToExist(join(guardDir, 'test-guard.guard.spec.ts'));
+  await expectFileToExist(join(guardDir, 'test-guard.ts'));
+  await expectFileToMatch(join(guardDir, 'test-guard.ts'), /export const testGuard: CanActivateFn/);
+  await expectFileToExist(join(guardDir, 'test-guard.spec.ts'));
   await ng('test', '--watch=false');
 }

packages/schematics/angular/guard/type-files/__name@dasherize__.guard.ts.template renamed to packages/schematics/angular/guard/type-files/__name@dasherize____typeSeparator__guard.ts.template

@@ -8,8 +8,8 @@ export default async function () {
 
   await ng('generate', 'guard', 'match', '--implements=CanMatch');
   await expectFileToExist(guardDir);
-  await expectFileToExist(join(guardDir, 'match.guard.ts'));
-  await expectFileToMatch(join(guardDir, 'match.guard.ts'), /export const matchGuard: CanMatch/);
-  await expectFileToExist(join(guardDir, 'match.guard.spec.ts'));
+  await expectFileToExist(join(guardDir, 'match-guard.ts'));
+  await expectFileToMatch(join(guardDir, 'match-guard.ts'), /export const matchGuard: CanMatch/);
+  await expectFileToExist(join(guardDir, 'match-guard.spec.ts'));
   await ng('test', '--watch=false');
 }

tests/legacy-cli/e2e/tests/generate/guard/guard-basic.ts

@@ -16,11 +16,11 @@ export default async function () {
     '--no-functional',
   );
   await expectFileToExist(guardDir);
-  await expectFileToExist(join(guardDir, 'multiple.guard.ts'));
+  await expectFileToExist(join(guardDir, 'multiple-guard.ts'));
   await expectFileToMatch(
-    join(guardDir, 'multiple.guard.ts'),
+    join(guardDir, 'multiple-guard.ts'),
     /implements CanActivate, CanDeactivate<unknown>/,
   );
-  await expectFileToExist(join(guardDir, 'multiple.guard.spec.ts'));
+  await expectFileToExist(join(guardDir, 'multiple-guard.spec.ts'));
   await ng('test', '--watch=false');
 }