0
# Generators
1

2
Generators in @nx/angular provide comprehensive scaffolding for Angular applications, libraries, components, and modern development patterns including Module Federation and NgRx integration.
3

4
## Capabilities
5

6
### Application Generation
7

8
#### Application Generator
9

10
Creates a new Angular application with modern configuration options.
11

12
```typescript { .api }
13
/**
14
 * Creates a new Angular application
15
 * @param tree - Virtual file system tree
16
 * @param schema - Application configuration options
17
 * @returns Promise resolving to callback function
18
 */
19
async function applicationGenerator(
20
  tree: Tree,
21
  schema: Partial<ApplicationGeneratorSchema>
22
): Promise<GeneratorCallback>;
23

24
interface ApplicationGeneratorSchema {
25
  name: string;
26
  routing?: boolean;
27
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
28
  skipTests?: boolean;
29
  directory?: string;
30
  tags?: string;
31
  standalone?: boolean;
32
  backendProject?: string;
33
  strict?: boolean;
34
  enableIvy?: boolean;
35
  bundler?: 'webpack' | 'esbuild';
36
  ssr?: boolean;
37
  prefix?: string;
38
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
39
  inlineStyle?: boolean;
40
  inlineTemplate?: boolean;
41
  skipPackageJson?: boolean;
42
  unitTestRunner?: 'jest' | 'none';
43
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
44
}
45
```
46

47
**Usage Example:**
48

49
```typescript
50
import { applicationGenerator } from "@nx/angular/generators";
51
import { Tree } from "@nx/devkit";
52

53
await applicationGenerator(tree, {
54
  name: "my-app",
55
  routing: true,
56
  style: "scss",
57
  standalone: true,
58
  ssr: false,
59
  unitTestRunner: "jest",
60
  e2eTestRunner: "cypress"
61
});
62
```
63

64
#### Library Generator
65

66
Creates a new Angular library with various configuration options.
67

68
```typescript { .api }
69
/**
70
 * Creates a new Angular library
71
 * @param tree - Virtual file system tree
72
 * @param schema - Library configuration options
73
 * @returns Promise resolving to callback function
74
 */
75
async function libraryGenerator(
76
  tree: Tree,
77
  schema: LibraryGeneratorSchema
78
): Promise<GeneratorCallback>;
79

80
interface LibraryGeneratorSchema {
81
  name: string;
82
  directory?: string;
83
  publishable?: boolean;
84
  buildable?: boolean;
85
  importPath?: string;
86
  prefix?: string;
87
  skipModule?: boolean;
88
  tags?: string;
89
  unitTestRunner?: 'jest' | 'none';
90
  strict?: boolean;
91
  standaloneConfig?: boolean;
92
  compilationMode?: 'full' | 'partial';
93
  setParserOptionsProject?: boolean;
94
  addModuleSpec?: boolean;
95
  skipPackageJson?: boolean;
96
  skipTsConfig?: boolean;
97
  simpleName?: boolean;
98
}
99
```
100

101
### Component Generation
102

103
#### Component Generator
104

105
Generates an Angular component with optional configuration.
106

107
```typescript { .api }
108
/**
109
 * Generates an Angular component
110
 * @param tree - Virtual file system tree
111
 * @param rawOptions - Component configuration options
112
 * @returns Promise resolving to callback function
113
 */
114
async function componentGenerator(
115
  tree: Tree,
116
  rawOptions: ComponentGeneratorSchema
117
): Promise<GeneratorCallback>;
118

119
interface ComponentGeneratorSchema {
120
  name: string;
121
  project?: string;
122
  path?: string;
123
  prefix?: string;
124
  displayBlock?: boolean;
125
  inlineStyle?: boolean;
126
  inlineTemplate?: boolean;
127
  standalone?: boolean;
128
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
129
  changeDetection?: 'Default' | 'OnPush';
130
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
131
  skipTests?: boolean;
132
  selector?: string;
133
  skipImport?: boolean;
134
  flat?: boolean;
135
  skipSelector?: boolean;
136
  module?: string;
137
  export?: boolean;
138
}
139
```
140

141
#### Directive Generator
142

143
Generates an Angular directive.
144

145
```typescript { .api }
146
/**
147
 * Generates an Angular directive
148
 * @param tree - Virtual file system tree
149
 * @param rawOptions - Directive configuration options
150
 * @returns Promise resolving to callback function
151
 */
152
async function directiveGenerator(
153
  tree: Tree,
154
  rawOptions: DirectiveGeneratorSchema
155
): Promise<GeneratorCallback>;
156

157
interface DirectiveGeneratorSchema {
158
  name: string;
159
  project?: string;
160
  path?: string;
161
  prefix?: string;
162
  standalone?: boolean;
163
  skipTests?: boolean;
164
  selector?: string;
165
  skipImport?: boolean;
166
  flat?: boolean;
167
  module?: string;
168
  export?: boolean;
169
}
170
```
171

172
#### Pipe Generator
173

174
Generates an Angular pipe.
175

176
```typescript { .api }
177
/**
178
 * Generates an Angular pipe
179
 * @param tree - Virtual file system tree
180
 * @param rawOptions - Pipe configuration options
181
 * @returns Promise resolving to callback function
182
 */
183
async function pipeGenerator(
184
  tree: Tree,
185
  rawOptions: PipeGeneratorSchema
186
): Promise<GeneratorCallback>;
187

188
interface PipeGeneratorSchema {
189
  name: string;
190
  project?: string;
191
  path?: string;
192
  standalone?: boolean;
193
  skipTests?: boolean;
194
  skipImport?: boolean;
195
  flat?: boolean;
196
  module?: string;
197
  export?: boolean;
198
}
199
```
200

201
### SCAM (Single Component Angular Module) Generators
202

203
#### SCAM Generator
204

205
Generates a component with an accompanying Single Component Angular Module.
206

207
```typescript { .api }
208
/**
209
 * Generates a SCAM (Single Component Angular Module)
210
 * @param tree - Virtual file system tree
211
 * @param rawOptions - SCAM configuration options
212
 * @returns Promise resolving to callback function
213
 */
214
async function scamGenerator(
215
  tree: Tree,
216
  rawOptions: ScamGeneratorSchema
217
): Promise<GeneratorCallback>;
218

219
interface ScamGeneratorSchema {
220
  name: string;
221
  project?: string;
222
  path?: string;
223
  inlineScam?: boolean;
224
  prefix?: string;
225
  displayBlock?: boolean;
226
  inlineStyle?: boolean;
227
  inlineTemplate?: boolean;
228
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
229
  changeDetection?: 'Default' | 'OnPush';
230
  style?: 'css' | 'scss' | 'sass' | 'less' | 'styl';
231
  skipTests?: boolean;
232
  selector?: string;
233
  flat?: boolean;
234
  export?: boolean;
235
}
236
```
237

238
#### SCAM Directive Generator
239

240
Generates a directive with an accompanying Single Component Angular Module.
241

242
```typescript { .api }
243
/**
244
 * Generates a directive with SCAM (Single Component Angular Module)
245
 * @param tree - Virtual file system tree
246
 * @param rawOptions - SCAM directive configuration options
247
 * @returns Promise resolving to callback function
248
 */
249
async function scamDirectiveGenerator(
250
  tree: Tree,
251
  rawOptions: ScamDirectiveGeneratorSchema
252
): Promise<GeneratorCallback>;
253

254
interface ScamDirectiveGeneratorSchema {
255
  path: string;
256
  name?: string;
257
  skipTests?: boolean;
258
  inlineScam?: boolean;
259
  selector?: string;
260
  prefix?: string;
261
  export?: boolean;
262
  type?: string;
263
  skipFormat?: boolean;
264
}
265
```
266

267
**Usage Example:**
268

269
```typescript
270
import { scamDirectiveGenerator } from "@nx/angular/generators";
271

272
await scamDirectiveGenerator(tree, {
273
  path: "libs/ui-components/src/lib/highlight.directive.ts",
274
  selector: "appHighlight",
275
  export: true
276
});
277
```
278

279
#### SCAM Pipe Generator
280

281
Generates a pipe with an accompanying Single Component Angular Module.
282

283
```typescript { .api }
284
/**
285
 * Generates a pipe with SCAM (Single Component Angular Module)
286
 * @param tree - Virtual file system tree
287
 * @param rawOptions - SCAM pipe configuration options
288
 * @returns Promise resolving to callback function
289
 */
290
async function scamPipeGenerator(
291
  tree: Tree,
292
  rawOptions: ScamPipeGeneratorSchema
293
): Promise<GeneratorCallback>;
294

295
interface ScamPipeGeneratorSchema {
296
  path: string;
297
  name?: string;
298
  skipTests?: boolean;
299
  inlineScam?: boolean;
300
  export?: boolean;
301
  typeSeparator?: '-' | '.';
302
  skipFormat?: boolean;
303
}
304
```
305

306
**Usage Example:**
307

308
```typescript
309
import { scamPipeGenerator } from "@nx/angular/generators";
310

311
await scamPipeGenerator(tree, {
312
  path: "libs/ui-components/src/lib/currency-format.pipe.ts",
313
  export: true
314
});
315
```
316

317
#### SCAM to Standalone Converter
318

319
Converts an existing SCAM to a standalone component.
320

321
```typescript { .api }
322
/**
323
 * Converts a SCAM to a standalone component
324
 * @param tree - Virtual file system tree
325
 * @param rawOptions - Conversion configuration options
326
 * @returns Promise resolving to callback function
327
 */
328
async function scamToStandaloneGenerator(
329
  tree: Tree,
330
  rawOptions: ScamToStandaloneSchema
331
): Promise<GeneratorCallback>;
332

333
interface ScamToStandaloneSchema {
334
  component: string;
335
  project?: string;
336
}
337
```
338

339
### NgRx Integration
340

341
#### NgRx Root Store Generator
342

343
Adds NgRx root store configuration to an application.
344

345
```typescript { .api }
346
/**
347
 * Adds NgRx root store to an application
348
 * @param tree - Virtual file system tree
349
 * @param options - NgRx root store configuration
350
 * @returns Promise resolving to callback function
351
 */
352
async function ngrxRootStoreGenerator(
353
  tree: Tree,
354
  options: NgrxRootStoreSchema
355
): Promise<GeneratorCallback>;
356

357
interface NgrxRootStoreSchema {
358
  project: string;
359
  skipFormat?: boolean;
360
  skipPackageJson?: boolean;
361
  skipImport?: boolean;
362
  minimal?: boolean;
363
}
364
```
365

366
#### NgRx Feature Store Generator
367

368
Adds NgRx feature store to an application or library.
369

370
```typescript { .api }
371
/**
372
 * Adds NgRx feature store to a project
373
 * @param tree - Virtual file system tree
374
 * @param options - NgRx feature store configuration
375
 * @returns Promise resolving to callback function
376
 */
377
async function ngrxFeatureStoreGenerator(
378
  tree: Tree,
379
  options: NgrxFeatureStoreSchema
380
): Promise<GeneratorCallback>;
381

382
interface NgrxFeatureStoreSchema {
383
  name: string;
384
  project: string;
385
  directory?: string;
386
  barrels?: boolean;
387
  facade?: boolean;
388
  skipFormat?: boolean;
389
  skipPackageJson?: boolean;
390
  syntax?: 'creators' | 'classes';
391
  skipImport?: boolean;
392
}
393
```
394

395
### Setup and Configuration Generators
396

397
#### Setup SSR Generator
398

399
Configures Angular Universal (SSR) for an Angular application.
400

401
```typescript { .api }
402
/**
403
 * Sets up Angular Universal (SSR) for an application
404
 * @param tree - Virtual file system tree
405
 * @param options - SSR setup configuration
406
 * @returns Promise resolving to callback function
407
 */
408
async function setupSsrGenerator(
409
  tree: Tree,
410
  options: SetupSsrSchema
411
): Promise<GeneratorCallback>;
412

413
interface SetupSsrSchema {
414
  project: string;
415
  appId?: string;
416
  skipFormat?: boolean;
417
  skipPackageJson?: boolean;
418
}
419
```
420

421
#### Setup Tailwind Generator
422

423
Configures Tailwind CSS for an application or library.
424

425
```typescript { .api }
426
/**
427
 * Configures Tailwind CSS for a project
428
 * @param tree - Virtual file system tree
429
 * @param options - Tailwind setup configuration
430
 * @returns Promise resolving to callback function
431
 */
432
async function setupTailwindGenerator(
433
  tree: Tree,
434
  options: SetupTailwindSchema
435
): Promise<GeneratorCallback>;
436

437
interface SetupTailwindSchema {
438
  project: string;
439
  buildTarget?: string;
440
  skipFormat?: boolean;
441
  skipPackageJson?: boolean;
442
}
443
```
444

445
#### Web Worker Generator
446

447
Creates a new Web Worker for an Angular application.
448

449
```typescript { .api }
450
/**
451
 * Creates a Web Worker
452
 * @param tree - Virtual file system tree
453
 * @param options - Web Worker configuration
454
 * @returns Promise resolving to callback function
455
 */
456
async function webWorkerGenerator(
457
  tree: Tree,
458
  options: WebWorkerSchema
459
): Promise<GeneratorCallback>;
460

461
interface WebWorkerSchema {
462
  name: string;
463
  project: string;
464
  path?: string;
465
  target?: string;
466
  snippet?: boolean;
467
}
468
```
469

470
#### Library Secondary Entry Point Generator
471

472
Creates a secondary entry point for an Angular publishable library.
473

474
```typescript { .api }
475
/**
476
 * Creates a secondary entry point for a library
477
 * @param tree - Virtual file system tree
478
 * @param options - Secondary entry point configuration
479
 * @returns Promise resolving to callback function
480
 */
481
async function librarySecondaryEntryPointGenerator(
482
  tree: Tree,
483
  options: LibrarySecondaryEntryPointSchema
484
): Promise<GeneratorCallback>;
485

486
interface LibrarySecondaryEntryPointSchema {
487
  name: string;
488
  library: string;
489
  skipModule?: boolean;
490
}
491
```
492

493
### Conversion Generators
494

495
#### Convert to Application Executor
496

497
Converts projects to use the @nx/angular:application executor.
498

499
```typescript { .api }
500
/**
501
 * Converts projects to use the application executor
502
 * @param tree - Virtual file system tree
503
 * @param options - Conversion configuration
504
 * @returns Promise resolving to callback function
505
 */
506
async function convertToApplicationExecutor(
507
  tree: Tree,
508
  options: ConvertToApplicationExecutorSchema
509
): Promise<GeneratorCallback>;
510

511
interface ConvertToApplicationExecutorSchema {
512
  project: string;
513
  skipFormat?: boolean;
514
}
515
```
516

517
#### Convert to Rspack
518

519
Converts Angular Webpack projects to use Rspack.
520

521
```typescript { .api }
522
/**
523
 * Converts Angular projects to use Rspack
524
 * @param tree - Virtual file system tree
525
 * @param options - Rspack conversion configuration
526
 * @returns Promise resolving to callback function
527
 */
528
async function convertToRspack(
529
  tree: Tree,
530
  options: ConvertToRspackSchema
531
): Promise<GeneratorCallback>;
532

533
interface ConvertToRspackSchema {
534
  project: string;
535
  skipFormat?: boolean;
536
}
537
```
538

539
### Internal and Setup Generators
540

541
#### Init Generator
542

543
Initializes the @nx/angular plugin in a workspace.
544

545
```typescript { .api }
546
/**
547
 * Initializes the @nx/angular plugin
548
 * @param tree - Virtual file system tree
549
 * @param rawOptions - Initialization options
550
 * @returns Promise resolving to callback function
551
 */
552
async function initGenerator(
553
  tree: Tree,
554
  rawOptions: InitSchema
555
): Promise<GeneratorCallback>;
556

557
interface InitSchema {
558
  skipFormat?: boolean;
559
  skipPackageJson?: boolean;
560
  skipPostInstall?: boolean;
561
  unitTestRunner?: 'jest' | 'none';
562
  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
563
}
564
```
565

566
#### Add Linting Generator
567

568
Adds linting configuration to an Angular project.
569

570
```typescript { .api }
571
/**
572
 * Adds linting configuration to a project
573
 * @param tree - Virtual file system tree
574
 * @param options - Linting configuration options
575
 * @returns Promise resolving to callback function
576
 */
577
async function addLintingGenerator(
578
  tree: Tree,
579
  options: AddLintingSchema
580
): Promise<GeneratorCallback>;
581

582
interface AddLintingSchema {
583
  projectName: string;
584
  projectRoot: string;
585
  prefix: string;
586
  setParserOptionsProject?: boolean;
587
  skipFormat?: boolean;
588
}
589
```
590

591
## Types
592

593
```typescript { .api }
594
interface Tree {
595
  read(filePath: string): Buffer | null;
596
  write(filePath: string, content: Buffer | string): void;
597
  exists(filePath: string): boolean;
598
  delete(filePath: string): void;
599
  rename(from: string, to: string): void;
600
  children(dirPath: string): string[];
601
  isFile(filePath: string): boolean;
602
}
603

604
interface GeneratorCallback {
605
  (): void | Promise<void>;
606
}
607

608
type UnitTestRunner = 'jest' | 'none';
609
type E2eTestRunner = 'cypress' | 'playwright' | 'none';
610
type Style = 'css' | 'scss' | 'sass' | 'less' | 'styl';
611
type ViewEncapsulation = 'Emulated' | 'Native' | 'None';
612
type ChangeDetection = 'Default' | 'OnPush';
613
type Bundler = 'webpack' | 'esbuild';
614
```