0
# Schematics
1

2
Angular schematics are code generators that create and modify files in an Angular project. @schematics/angular provides 24 schematics that can be invoked through the Angular CLI or programmatically.
3

4
## Capabilities
5

6
### Application Schematic
7

8
Creates a new Angular application with routing, styling, and initial project structure.
9

10
```typescript { .api }
11
/**
12
 * Creates a new Angular application
13
 * @param options - Application configuration options
14
 * @returns Rule for creating the application
15
 */
16
declare function application(options: ApplicationSchema): Rule;
17

18
interface ApplicationSchema {
19
  name: string;
20
  version?: string;
21
  routing?: boolean;
22
  inlineStyle?: boolean;
23
  inlineTemplate?: boolean;
24
  style?: Style;
25
  skipTests?: boolean;
26
  skipPackageJson?: boolean;
27
  skipInstall?: boolean;
28
  strict?: boolean;
29
  standalone?: boolean;
30
  ssr?: boolean;
31
  viewEncapsulation?: ViewEncapsulation;
32
  prefix?: string;
33
  displayBlock?: boolean;
34
}
35

36
enum Style {
37
  Css = 'css',
38
  Scss = 'scss', 
39
  Sass = 'sass',
40
  Less = 'less',
41
  Styl = 'styl'
42
}
43
```
44

45
**Usage Example:**
46

47
```typescript
48
import { application } from '@schematics/angular';
49

50
const appRule = application({
51
  name: 'my-app',
52
  routing: true,
53
  style: Style.Scss,
54
  standalone: true
55
});
56
```
57

58
### Component Schematic
59

60
Creates Angular components with template, styles, and test files.
61

62
```typescript { .api }
63
/**
64
 * Creates an Angular component
65
 * @param options - Component configuration options  
66
 * @returns Rule for creating the component
67
 */
68
declare function component(options: ComponentSchema): Rule;
69

70
interface ComponentSchema {
71
  name: string;
72
  path?: string;
73
  project?: string;
74
  inlineTemplate?: boolean;
75
  inlineStyle?: boolean;
76
  displayBlock?: boolean;
77
  changeDetection?: ChangeDetectionStrategy;
78
  style?: Style;
79
  type?: string;
80
  skipTests?: boolean;
81
  flat?: boolean;
82
  skipImport?: boolean;
83
  selector?: string;
84
  module?: string;
85
  export?: boolean;
86
  prefix?: string;
87
  standalone?: boolean;
88
}
89

90
enum ChangeDetectionStrategy {
91
  Default = 'Default',
92
  OnPush = 'OnPush'
93
}
94

95
enum ViewEncapsulation {
96
  Emulated = 'Emulated',
97
  None = 'None',
98
  ShadowDom = 'ShadowDom'
99
}
100
```
101

102
### Service Schematic
103

104
Creates Angular services with dependency injection setup.
105

106
```typescript { .api }
107
/**
108
 * Creates an Angular service
109
 * @param options - Service configuration options
110
 * @returns Rule for creating the service  
111
 */
112
declare function service(options: ServiceSchema): Rule;
113

114
interface ServiceSchema {
115
  name: string;
116
  path?: string;
117
  project?: string;
118
  flat?: boolean;
119
  skipTests?: boolean;
120
}
121
```
122

123
### Module Schematic
124

125
Creates Angular modules with routing and component organization.
126

127
```typescript { .api }
128
/**
129
 * Creates an Angular module
130
 * @param options - Module configuration options
131
 * @returns Rule for creating the module
132
 */
133
declare function module(options: ModuleSchema): Rule;
134

135
interface ModuleSchema {
136
  name: string;
137
  path?: string;
138
  project?: string;
139
  routing?: boolean;
140
  routingScope?: RoutingScope;
141
  flat?: boolean;
142
  commonModule?: boolean;
143
  module?: string;
144
}
145

146
enum RoutingScope {
147
  Child = 'Child',
148
  Root = 'Root'
149
}
150
```
151

152
### Directive Schematic
153

154
Creates Angular directives for DOM manipulation and behavior.
155

156
```typescript { .api }
157
/**
158
 * Creates an Angular directive
159
 * @param options - Directive configuration options
160
 * @returns Rule for creating the directive
161
 */
162
declare function directive(options: DirectiveSchema): Rule;
163

164
interface DirectiveSchema {
165
  name: string;
166
  path?: string;
167
  project?: string;
168
  skipTests?: boolean;
169
  skipImport?: boolean;
170
  selector?: string;
171
  flat?: boolean;
172
  module?: string;
173
  export?: boolean;
174
  prefix?: string;
175
  standalone?: boolean;
176
}
177
```
178

179
### Pipe Schematic
180

181
Creates Angular pipes for data transformation in templates.
182

183
```typescript { .api }
184
/**
185
 * Creates an Angular pipe
186
 * @param options - Pipe configuration options
187
 * @returns Rule for creating the pipe
188
 */
189
declare function pipe(options: PipeSchema): Rule;
190

191
interface PipeSchema {
192
  name: string;
193
  path?: string;
194
  project?: string;
195
  skipTests?: boolean;
196
  skipImport?: boolean;
197
  flat?: boolean;
198
  module?: string;
199
  export?: boolean;
200
  standalone?: boolean;
201
}
202
```
203

204
### Guard Schematic
205

206
Creates route guards for navigation control and security.
207

208
```typescript { .api }
209
/**
210
 * Creates a route guard
211
 * @param options - Guard configuration options
212
 * @returns Rule for creating the guard
213
 */
214
declare function guard(options: GuardSchema): Rule;
215

216
interface GuardSchema {
217
  name: string;
218
  path?: string;
219
  project?: string;
220
  skipTests?: boolean;
221
  flat?: boolean;
222
  implements?: GuardType[];
223
}
224

225
enum GuardType {
226
  CanActivate = 'CanActivate',
227
  CanActivateChild = 'CanActivateChild', 
228
  CanDeactivate = 'CanDeactivate',
229
  CanLoad = 'CanLoad',
230
  CanMatch = 'CanMatch'
231
}
232
```
233

234
### Interceptor Schematic
235

236
Creates HTTP interceptors for request/response processing.
237

238
```typescript { .api }
239
/**
240
 * Creates an HTTP interceptor
241
 * @param options - Interceptor configuration options
242
 * @returns Rule for creating the interceptor
243
 */
244
declare function interceptor(options: InterceptorSchema): Rule;
245

246
interface InterceptorSchema {
247
  name: string;
248
  path?: string;
249
  project?: string;
250
  skipTests?: boolean;
251
  flat?: boolean;
252
  functional?: boolean;
253
}
254
```
255

256
### Resolver Schematic
257

258
Creates route resolvers for pre-loading data before navigation.
259

260
```typescript { .api }
261
/**
262
 * Creates a route resolver
263
 * @param options - Resolver configuration options
264
 * @returns Rule for creating the resolver
265
 */
266
declare function resolver(options: ResolverSchema): Rule;
267

268
interface ResolverSchema {
269
  name: string;
270
  path?: string;
271
  project?: string;
272
  skipTests?: boolean;
273
  flat?: boolean;
274
}
275
```
276

277
### Library Schematic
278

279
Creates Angular libraries for code sharing and distribution.
280

281
```typescript { .api }
282
/**
283
 * Creates an Angular library
284
 * @param options - Library configuration options
285
 * @returns Rule for creating the library
286
 */
287
declare function library(options: LibrarySchema): Rule;
288

289
interface LibrarySchema {
290
  name: string;
291
  prefix?: string;
292
  skipPackageJson?: boolean;
293
  skipInstall?: boolean;
294
  skipTsConfig?: boolean;
295
  standalone?: boolean;
296
}
297
```
298

299
### Additional Schematics
300

301
#### Class Schematic
302

303
```typescript { .api }
304
declare function class(options: ClassSchema): Rule;
305

306
interface ClassSchema {
307
  name: string;
308
  path?: string;
309
  project?: string;
310
  skipTests?: boolean;
311
  type?: string;
312
}
313
```
314

315
#### Interface Schematic
316

317
```typescript { .api }
318
declare function interface(options: InterfaceSchema): Rule;
319

320
interface InterfaceSchema {
321
  name: string;
322
  path?: string;
323
  project?: string;
324
  prefix?: string;
325
  type?: string;
326
}
327
```
328

329
#### Enum Schematic
330

331
```typescript { .api }
332
declare function enum(options: EnumSchema): Rule;
333

334
interface EnumSchema {
335
  name: string;
336
  path?: string;
337
  project?: string;
338
  type?: string;
339
}
340
```
341

342
#### Service Worker Schematic
343

344
```typescript { .api }
345
declare function serviceWorker(options: ServiceWorkerSchema): Rule;
346

347
interface ServiceWorkerSchema {
348
  project: string;
349
  target?: string;
350
  configuration?: string;
351
}
352
```
353

354
#### Web Worker Schematic
355

356
```typescript { .api }
357
declare function webWorker(options: WebWorkerSchema): Rule;
358

359
interface WebWorkerSchema {
360
  name: string;
361
  path?: string;
362
  project?: string;
363
  target?: string;
364
  snippet?: boolean;
365
}
366
```
367

368
#### App Shell Schematic
369

370
```typescript { .api }
371
declare function appShell(options: AppShellSchema): Rule;
372

373
interface AppShellSchema {
374
  project: string;
375
  route?: string;
376
  name?: string;
377
}
378
```
379

380
#### Environments Schematic
381

382
```typescript { .api }
383
declare function environments(options: EnvironmentsSchema): Rule;
384

385
interface EnvironmentsSchema {
386
  project: string;
387
}
388
```
389

390
#### Config Schematic
391

392
```typescript { .api }
393
declare function config(options: ConfigSchema): Rule;
394

395
interface ConfigSchema {
396
  project: string;
397
  type: ConfigType;
398
}
399

400
enum ConfigType {
401
  Karma = 'karma',
402
  Browserslist = 'browserslist'
403
}
404
```
405

406
#### AI Config Schematic
407

408
```typescript { .api }
409
declare function aiConfig(options: AiConfigSchema): Rule;
410

411
interface AiConfigSchema {
412
  project: string;
413
}
414
```
415

416
#### Web Worker Schematic
417

418
```typescript { .api }
419
declare function webWorker(options: WebWorkerSchema): Rule;
420

421
interface WebWorkerSchema {
422
  name: string;
423
  path?: string;
424
  project?: string;
425
  target?: string;
426
  snippet?: boolean;
427
}
428
```
429

430
#### App Shell Schematic
431

432
```typescript { .api }
433
declare function appShell(options: AppShellSchema): Rule;
434

435
interface AppShellSchema {
436
  project: string;
437
  route?: string;
438
  name?: string;
439
}
440
```
441

442
#### Environments Schematic
443

444
```typescript { .api }
445
declare function environments(options: EnvironmentsSchema): Rule;
446

447
interface EnvironmentsSchema {
448
  project: string;
449
}
450
```
451

452
#### Config Schematic
453

454
```typescript { .api }
455
declare function config(options: ConfigSchema): Rule;
456

457
interface ConfigSchema {
458
  project: string;
459
  type: ConfigType;
460
}
461

462
enum ConfigType {
463
  Karma = 'karma',
464
  Browserslist = 'browserslist'
465
}
466
```
467

468
## Hidden/Internal Schematics
469

470
These schematics are marked as hidden and are primarily used internally by Angular CLI:
471

472
- **ng-new**: Creates initial workspace structure
473
- **workspace**: Sets up Angular workspace configuration  
474
- **private-e2e**: Internal E2E testing setup (private API)
475
- **server**: Server-side rendering application setup
476
- **ssr**: Server-side rendering configuration
477

478
## Migration Schematics
479

480
@schematics/angular includes a migration collection for automatic project updates between Angular versions. These migrations handle breaking changes and deprecated APIs:
481

482
```typescript { .api }
483
// Migration collection available at @schematics/angular/migrations.json
484
interface MigrationSchema {
485
  version: string;
486
  description: string;
487
  factory: string;
488
}
489
```
490

491
### Available Migrations (v20.2.2)
492

493
- **replace-provide-server-rendering-import** (v20.0.0): Updates server rendering imports
494
- **replace-provide-server-routing** (v20.0.0): Updates server routing configuration  
495
- **update-module-resolution** (v20.0.0): Updates module resolution settings
496
- **previous-style-guide** (v20.0.0): Applies previous style guide changes
497
- **use-application-builder** (v20.0.0): Migrates to application builder
498
- **remove-default-karma-config** (v20.2.0): Removes default Karma configuration
499

500
**Usage:**
501
```bash
502
ng update @angular/cli --migrate-only --from=19 --to=20
503
```