Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4c711d4

Browse files
feat(@schematics/angular): add schematics to generate ai context files.
* `ng generate ai-config` to prompt support tools. * `ng generate config ai --tool=gemini` to specify the tool. * `ng new` will prompt to config AI tools. * `ng new --aiConfig=gemini` to create a new project with AI configuration. Supported ai tools: gemini, claude, copilot, windsurf, cursor.
1 parent 5eeebf9 commit 4c711d4

File tree

10 files changed

+280
-2
lines changed

10 files changed

+280
-2
lines changed

‎goldens/public-api/angular_devkit/schematics/index.api.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,10 @@ export enum MergeStrategy {
637637
export function mergeWith(source: Source, strategy?: MergeStrategy): Rule;
638638

639639
// @public (undocumented)
640-
export function move(from: string, to?: string): Rule;
640+
export function move(from: string, to: string): Rule;
641+
642+
// @public (undocumented)
643+
export function move(to: string): Rule;
641644

642645
// @public (undocumented)
643646
export function noop(): Rule;

‎packages/angular_devkit/schematics/src/rules/move.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { join, normalize } from '@angular-devkit/core';
1010
import { Rule } from '../engine/interface';
1111
import { noop } from './base';
1212

13+
export function move(from: string, to: string): Rule;
14+
export function move(to: string): Rule;
1315
export function move(from: string, to?: string): Rule {
1416
if (to === undefined) {
1517
to = from;
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<% if (frontmatter) { %><%= frontmatter %>
2+
3+
<% } %>You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
4+
5+
## TypeScript Best Practices
6+
7+
- Use strict type checking
8+
- Prefer type inference when the type is obvious
9+
- Avoid the `any` type; use `unknown` when type is uncertain
10+
11+
## Angular Best Practices
12+
13+
- Always use standalone components over NgModules
14+
- Must NOT set `standalone: true` inside Angular decorators. It's the default.
15+
- Use signals for state management
16+
- Implement lazy loading for feature routes
17+
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
18+
- Use `NgOptimizedImage` for all static images.
19+
- `NgOptimizedImage` does not work for inline base64 images.
20+
21+
## Components
22+
23+
- Keep components small and focused on a single responsibility
24+
- Use `input()` and `output()` functions instead of decorators
25+
- Use `computed()` for derived state
26+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
27+
- Prefer inline templates for small components
28+
- Prefer Reactive forms instead of Template-driven ones
29+
- Do NOT use `ngClass`, use `class` bindings instead
30+
- DO NOT use `ngStyle`, use `style` bindings instead
31+
32+
## State Management
33+
34+
- Use signals for local component state
35+
- Use `computed()` for derived state
36+
- Keep state transformations pure and predictable
37+
- Do NOT use `mutate` on signals, use `update` or `set` instead
38+
39+
## Templates
40+
41+
- Keep templates simple and avoid complex logic
42+
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
43+
- Use the async pipe to handle observables
44+
45+
## Services
46+
47+
- Design services around a single responsibility
48+
- Use the `providedIn: 'root'` option for singleton services
49+
- Use the `inject()` function instead of constructor injection
50+
51+
## Common pitfalls
52+
53+
- Control flow (`@if`):
54+
- You cannot use `as` expressions in `@else if (...)`. E.g. invalid code: `@else if (bla(); as x)`.
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {
10+
Rule,
11+
apply,
12+
applyTemplates,
13+
chain,
14+
filter,
15+
mergeWith,
16+
move,
17+
strings,
18+
url,
19+
} from '@angular-devkit/schematics';
20+
import { posix as path } from 'node:path';
21+
import { getWorkspace as readWorkspace } from '../utility/workspace';
22+
import { Schema as ConfigOptions, Tool } from './schema';
23+
24+
const AI_TOOLS = {
25+
gemini: {
26+
rulesName: 'GEMINI.md',
27+
directory: '.gemini',
28+
},
29+
claude: {
30+
rulesName: 'CLAUDE.md',
31+
directory: '.claude',
32+
},
33+
copilot: {
34+
rulesName: 'copilot-instructions.md',
35+
directory: '.github',
36+
},
37+
windsurf: {
38+
rulesName: 'guidelines.md',
39+
directory: path.join('.windsurf', 'rules'),
40+
},
41+
// Cursor file has a front matter section.
42+
cursor: {
43+
rulesName: 'cursor.mdc',
44+
directory: path.join('.cursor', 'rules'),
45+
frontmatter: `---\ncontext: true\npriority: high\nscope: project\n---`,
46+
},
47+
};
48+
49+
interface ContextFileInfo {
50+
rulesName: string;
51+
directory: string;
52+
frontmatter?: string;
53+
}
54+
55+
export default function (options: ConfigOptions): Rule {
56+
const selectedTools: Tool[] = options.tool;
57+
const files: ContextFileInfo[] = selectedTools.map(
58+
(selectedTool: keyof typeof AI_TOOLS) => AI_TOOLS[selectedTool],
59+
);
60+
61+
const rules = files.map(({ rulesName, directory, frontmatter }) =>
62+
mergeWith(
63+
apply(url('./files'), [
64+
// Keep only the single source template
65+
filter((p) => p.endsWith('__rulesName__.template')),
66+
applyTemplates({
67+
...strings,
68+
rulesName,
69+
frontmatter,
70+
}),
71+
move(directory),
72+
]),
73+
),
74+
);
75+
76+
return chain(rules);
77+
}
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
10+
import { Schema as ApplicationOptions } from '../application/schema';
11+
import { Schema as WorkspaceOptions } from '../workspace/schema';
12+
import { Schema as ConfigOptions, Tool as ConfigTool } from './schema';
13+
14+
describe('Ai Config Schematic', () => {
15+
const schematicRunner = new SchematicTestRunner(
16+
'@schematics/angular',
17+
require.resolve('../collection.json'),
18+
);
19+
20+
const workspaceOptions: WorkspaceOptions = {
21+
name: 'workspace',
22+
newProjectRoot: 'projects',
23+
version: '15.0.0',
24+
};
25+
26+
const defaultAppOptions: ApplicationOptions = {
27+
name: 'foo',
28+
inlineStyle: true,
29+
inlineTemplate: true,
30+
routing: false,
31+
skipPackageJson: false,
32+
};
33+
34+
let applicationTree: UnitTestTree;
35+
function runConfigSchematic(tool: ConfigTool[]): Promise<UnitTestTree> {
36+
return schematicRunner.runSchematic<ConfigOptions>('ai-config', { tool }, applicationTree);
37+
}
38+
39+
beforeEach(async () => {
40+
const workspaceTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
41+
applicationTree = await schematicRunner.runSchematic(
42+
'application',
43+
defaultAppOptions,
44+
workspaceTree,
45+
);
46+
});
47+
48+
it('should create a GEMINI.MD file', async () => {
49+
const tree = await runConfigSchematic([ConfigTool.Gemini]);
50+
tree.exists('.gemini/GEMINI.md');
51+
});
52+
53+
it('should create a copilot-instructions.md file', async () => {
54+
const tree = await runConfigSchematic([ConfigTool.Copilot]);
55+
expect(tree.exists('.github/copilot-instructions.md')).toBeTruthy();
56+
});
57+
58+
it('should create a cursor file', async () => {
59+
const tree = await runConfigSchematic([ConfigTool.Cursor]);
60+
expect(tree.exists('.cursor/rules/cursor.mdc')).toBeTruthy();
61+
});
62+
63+
it('should create a windsurf file', async () => {
64+
const tree = await runConfigSchematic([ConfigTool.Windsurf]);
65+
expect(tree.exists('.windsurf/rules/guidelines.md')).toBeTruthy();
66+
});
67+
68+
it('should create a claude file', async () => {
69+
const tree = await runConfigSchematic([ConfigTool.Claude]);
70+
expect(tree.exists('.claude/CLAUDE.md')).toBeTruthy();
71+
});
72+
73+
it('should create multiple files when multiple tools are selected', async () => {
74+
const tree = await runConfigSchematic([
75+
ConfigTool.Gemini,
76+
ConfigTool.Copilot,
77+
ConfigTool.Cursor,
78+
]);
79+
expect(tree.exists('.gemini/GEMINI.md')).toBeTruthy();
80+
expect(tree.exists('.github/copilot-instructions.md')).toBeTruthy();
81+
expect(tree.exists('.cursor/rules/cursor.mdc')).toBeTruthy();
82+
});
83+
});
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-07/schema",
3+
"$id": "SchematicsAngularConfig",
4+
"title": "Angular Config File Options Schema",
5+
"type": "object",
6+
"additionalProperties": false,
7+
"description": "Generates AI configuration files for Angular projects. This schematic creates configuration files that help AI tools follow Angular best practices, improving the quality of AI-generated code and suggestions.",
8+
"properties": {
9+
"tool": {
10+
"type": "array",
11+
"uniqueItems": true,
12+
"x-prompt": "What AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai",
13+
"description": "The AI tool for which the configuration file is being generated. This can include tools like Gemini, Copilot, Claude, Cursor, or Windsurf.",
14+
"minItems": 1,
15+
"items": {
16+
"type": "string",
17+
"enum": ["gemini", "copilot", "claude", "cursor", "windsurf"]
18+
}
19+
}
20+
},
21+
"required": ["tool"]
22+
}

‎packages/schematics/angular/collection.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,11 @@
131131
"factory": "./config",
132132
"schema": "./config/schema.json",
133133
"description": "Generates a configuration file."
134+
},
135+
"ai-config": {
136+
"factory": "./ai-config",
137+
"schema": "./ai-config/schema.json",
138+
"description": "Generates an AI tool configuration file."
134139
}
135140
}
136141
}

‎packages/schematics/angular/ng-new/index.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ import {
2222
NodePackageInstallTask,
2323
RepositoryInitializerTask,
2424
} from '@angular-devkit/schematics/tasks';
25+
import { Tool as AiTool, Schema as ConfigOptions } from '../ai-config/schema';
2526
import { Schema as ApplicationOptions } from '../application/schema';
2627
import { Schema as WorkspaceOptions } from '../workspace/schema';
27-
import { Schema as NgNewOptions } from './schema';
28+
import { AiConfig,Schema as NgNewOptions } from './schema';
2829

2930
export default function (options: NgNewOptions): Rule {
3031
if (!options.directory) {
@@ -60,11 +61,20 @@ export default function (options: NgNewOptions): Rule {
6061
zoneless: options.zoneless,
6162
};
6263

64+
const configOptions: ConfigOptions | undefined = options.aiConfig?.length
65+
? {
66+
tool: options.aiConfig as unknown as AiTool[],
67+
}
68+
: undefined;
69+
6370
return chain([
6471
mergeWith(
6572
apply(empty(), [
6673
schematic('workspace', workspaceOptions),
6774
options.createApplication ? schematic('application', applicationOptions) : noop,
75+
options.aiConfig && !options.aiConfig.includes(AiConfig.None) && configOptions
76+
? schematic('ai-config', configOptions)
77+
: noop,
6878
move(options.directory),
6979
]),
7080
),

‎packages/schematics/angular/ng-new/index_spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,16 @@ describe('Ng New Schematic', () => {
103103
const { cli } = JSON.parse(tree.readContent('/bar/angular.json'));
104104
expect(cli.packageManager).toBe('npm');
105105
});
106+
107+
it('should add ai config file when aiConfig is set', async () => {
108+
const options = { ...defaultOptions, aiConfig: ['gemini', 'claude'] };
109+
110+
const tree = await schematicRunner.runSchematic('ng-new', options);
111+
const files = tree.files;
112+
expect(files).toContain('/bar/.gemini/GEMINI.md');
113+
expect(files).toContain('/bar/.claude/CLAUDE.md');
114+
115+
expect(tree.readContent('/bar/.gemini/GEMINI.md')).toMatch(/^YouareanexpertinTypeScript/);
116+
expect(tree.readContent('/bar/.claude/CLAUDE.md')).toMatch(/^YouareanexpertinTypeScript/);
117+
});
106118
});

‎packages/schematics/angular/ng-new/schema.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,16 @@
144144
"x-prompt": "Do you want to create a 'zoneless' application without zone.js (Developer Preview)?",
145145
"type": "boolean",
146146
"default": false
147+
},
148+
"aiConfig": {
149+
"type": "array",
150+
"uniqueItems": true,
151+
"description": "Create an AI configuration file for the project. This file is used to improve the outputs of AI tools by following the best practices.",
152+
"x-prompt": "What AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai",
153+
"items": {
154+
"type": "string",
155+
"enum": ["none", "gemini", "copilot", "claude", "cursor", "windsurf"]
156+
}
147157
}
148158
},
149159
"required": ["name", "version"]

0 commit comments

Comments
(0)

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