0
# NgRx Schematics
1

2
NgRx Schematics provides Angular CLI schematics for generating NgRx state management code including actions, reducers, effects, selectors, and feature modules. It offers a comprehensive set of code generators that scaffold boilerplate NgRx patterns through the Angular CLI, enabling developers to quickly set up state management infrastructure with consistent patterns and best practices.
3

4
## Package Information
5

6
- **Package Name**: @ngrx/schematics
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install -D @ngrx/schematics`
10

11
## Core Usage
12

13
NgRx Schematics integrates with the Angular CLI to provide code generation commands:
14

15
```bash
16
# Initialize NgRx in your project
17
ng add @ngrx/schematics
18

19
# Generate various NgRx constructs
20
ng generate @ngrx/schematics:store AppState --root
21
ng generate @ngrx/schematics:action User
22
ng generate @ngrx/schematics:reducer User
23
ng generate @ngrx/schematics:effect User
24
ng generate @ngrx/schematics:selector User
25
```
26

27
## Basic Usage
28

29
```bash
30
# Install NgRx schematics in your Angular project
31
ng add @ngrx/schematics
32

33
# Create initial store setup
34
ng generate @ngrx/schematics:store AppState --root
35

36
# Generate a complete feature state
37
ng generate @ngrx/schematics:feature User --creators
38

39
# Generate individual components
40
ng generate @ngrx/schematics:action User --api
41
ng generate @ngrx/schematics:reducer User
42
ng generate @ngrx/schematics:effect User
43
ng generate @ngrx/schematics:selector User
44

45
# Generate container component
46
ng generate @ngrx/schematics:container UserList
47

48
# Generate entity state (with @ngrx/entity)
49
ng generate @ngrx/schematics:entity Product
50

51
# Generate component store
52
ng generate @ngrx/schematics:component-store UserStore
53
```
54

55
## Architecture
56

57
NgRx Schematics is built around several core components:
58

59
- **Collection Definition**: Central `collection.json` defining all available schematics with their configurations
60
- **Individual Schematics**: Each schematic has its own factory function, schema definition, and template files
61
- **Shared Utilities**: `schematics-core` module providing common utilities for AST manipulation, project analysis, and code generation
62
- **Template System**: Angular DevKit template system for generating boilerplate code with proper naming conventions
63
- **Migration System**: Support for automated migrations between NgRx versions
64

65
## Capabilities
66

67
### Store Initialization
68

69
Set up the initial NgRx store configuration in your Angular application with proper module imports and development tools integration.
70

71
```typescript { .api }
72
interface StoreSchema {
73
  name?: string;
74
  path?: string;
75
  project?: string;
76
  flat?: boolean;
77
  skipTests?: boolean;
78
  module?: string;
79
  statePath?: string;
80
  root?: boolean;
81
  stateInterface?: string;
82
  minimal?: boolean;
83
}
84
```
85

86
[Store Setup](./store-setup.md)
87

88
### Action Generation
89

90
Generate NgRx action classes with proper typing and optional API action patterns for success/failure scenarios.
91

92
```typescript { .api }
93
interface ActionSchema {
94
  name: string;
95
  prefix?: string;
96
  path?: string;
97
  project?: string;
98
  flat?: boolean;
99
  group?: boolean;
100
  api?: boolean;
101
}
102
```
103

104
[Action Generation](./action-generation.md)
105

106
### Reducer Generation
107

108
Create type-safe reducer functions that handle state updates in response to dispatched actions.
109

110
```typescript { .api }
111
interface ReducerSchema {
112
  name: string;
113
  path?: string;
114
  project?: string;
115
  flat?: boolean;
116
  group?: boolean;
117
  reducers?: string;
118
  feature?: boolean;
119
  creators?: boolean;
120
}
121
```
122

123
[Reducer Generation](./reducer-generation.md)
124

125
### Effect Generation
126

127
Generate side effect classes for handling asynchronous operations and external interactions in NgRx applications.
128

129
```typescript { .api }
130
interface EffectSchema {
131
  name: string;
132
  path?: string;
133
  project?: string;
134
  flat?: boolean;
135
  group?: boolean;
136
  module?: string;
137
  feature?: boolean;
138
  root?: boolean;
139
  minimal?: boolean;
140
  creators?: boolean;
141
}
142
```
143

144
[Effect Generation](./effect-generation.md)
145

146
### Selector Generation
147

148
Create memoized selector functions for efficiently accessing and computing derived state from the NgRx store.
149

150
```typescript { .api }
151
interface SelectorSchema {
152
  name: string;
153
  path?: string;
154
  project?: string;
155
  flat?: boolean;
156
  group?: boolean;
157
  feature?: boolean;
158
}
159
```
160

161
[Selector Generation](./selector-generation.md)
162

163
### Feature State Generation
164

165
Generate complete feature modules with actions, reducers, effects, and selectors in a single command.
166

167
```typescript { .api }
168
interface FeatureSchema {
169
  name: string;
170
  path?: string;
171
  project?: string;
172
  flat?: boolean;
173
  module?: string;
174
  skipTests?: boolean;
175
  reducers?: string;
176
  group?: boolean;
177
  api?: boolean;
178
  prefix?: string;
179
  entity?: boolean;
180
}
181
```
182

183
[Feature Generation](./feature-generation.md)
184

185
### Entity State Management
186

187
Generate entity-based state management using @ngrx/entity for collections of data with CRUD operations.
188

189
```typescript { .api }
190
interface EntitySchema {
191
  name: string;
192
  path?: string;
193
  project?: string;
194
  skipTests?: boolean;
195
  reducers?: string;
196
  module?: string;
197
  flat?: boolean;
198
  group?: boolean;
199
  feature?: boolean;
200
}
201
```
202

203
[Entity Management](./entity-management.md)
204

205
### Container Component Generation
206

207
Create smart container components that connect to the NgRx store and manage state interactions.
208

209
```typescript { .api }
210
interface ContainerSchema {
211
  name: string;
212
  path?: string;
213
  project?: string;
214
  inlineStyle?: boolean;
215
  inlineTemplate?: boolean;
216
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
217
  changeDetection?: 'Default' | 'OnPush';
218
  prefix?: string;
219
  style?: string;
220
  skipTests?: boolean;
221
  flat?: boolean;
222
  skipImport?: boolean;
223
  selector?: string;
224
  module?: string;
225
  export?: boolean;
226
  state?: string;
227
  stateInterface?: string;
228
  testDepth?: 'unit' | 'integration';
229
  standalone?: boolean;
230
  displayBlock?: boolean;
231
}
232
```
233

234
[Container Components](./container-components.md)
235

236
### Component Store
237

238
Generate standalone component stores using @ngrx/component-store for local component state management.
239

240
```typescript { .api }
241
interface ComponentStoreSchema {
242
  name: string;
243
  path?: string;
244
  project?: string;
245
  flat?: boolean;
246
  skipTests?: boolean;
247
  component?: string;
248
  module?: string;
249
}
250
```
251

252
[Component Store](./component-store.md)
253

254
### Data Services
255

256
Generate data services that integrate with @ngrx/data for entity-based data management with automatic HTTP operations.
257

258
```typescript { .api }
259
interface DataSchema {
260
  name: string;
261
  path?: string;
262
  project?: string;
263
  skipTests?: boolean;
264
  flat?: boolean;
265
  group?: boolean;
266
}
267
```
268

269
[Data Services](./data-services.md)
270

271
### NgRx Push Migration
272

273
Automated migration schematic to replace the `async` pipe with `ngrxPush` pipe for better performance with NgRx state.
274

275
```typescript { .api }
276
interface NgRxPushMigrationSchema {
277
  // This migration schematic has no configurable properties
278
}
279
```
280

281
[NgRx Push Migration](./ngrx-push-migration.md)
282

283
### Shared Utilities
284

285
Core utilities and helper functions used across all schematics for AST manipulation, project analysis, and code generation support.
286

287
```typescript { .api }
288
// String manipulation utilities
289
export function decamelize(str: string): string;
290
export function dasherize(str?: string): string;
291
export function camelize(str: string): string;
292
export function classify(str: string): string;
293
export function underscore(str: string): string;
294
export function capitalize(str: string): string;
295
export function pluralize(str: string): string;
296
export function group(name: string, group: string | undefined): string;
297
export function featurePath(
298
  group: boolean | undefined,
299
  flat: boolean | undefined,
300
  path: string,
301
  name: string
302
): string;
303

304
// AST manipulation functions
305
export function findNodes(
306
  node: ts.Node,
307
  kind: ts.SyntaxKind,
308
  max?: number
309
): ts.Node[];
310

311
export function getSourceNodes(sourceFile: ts.SourceFile): ts.Node[];
312

313
export function insertImport(
314
  source: ts.SourceFile,
315
  fileToEdit: string,
316
  symbolName: string,
317
  fileName: string,
318
  isDefault?: boolean
319
): Change;
320

321
export function addDeclarationToModule(
322
  source: ts.SourceFile,
323
  modulePath: string,
324
  classifiedName: string,
325
  importPath: string
326
): Change[];
327

328
export function addImportToModule(
329
  source: ts.SourceFile,
330
  modulePath: string,
331
  classifiedName: string,
332
  importPath: string
333
): Change[];
334

335
export function addProviderToModule(
336
  source: ts.SourceFile,
337
  modulePath: string,
338
  classifiedName: string,
339
  importPath: string
340
): Change[];
341

342
export function addProviderToComponent(
343
  source: ts.SourceFile,
344
  componentPath: string,
345
  classifiedName: string,
346
  importPath: string
347
): Change[];
348

349
// Project utilities
350
function getProjectPath(host: Tree, options: any): string;
351
function findModuleFromOptions(host: Tree, options: any): string;
352
function isLib(host: Tree, options: any): boolean;
353
```
354

355
[Utility Functions](./utility-functions.md)
356

357
## Common Schema Properties
358

359
All schematics share common configuration properties:
360

361
```typescript { .api }
362
interface BaseSchema {
363
  /** Name of the generated item */
364
  name: string;
365
  /** Path where files should be generated */
366
  path?: string;
367
  /** Angular project to target */
368
  project?: string;
369
  /** Generate files without creating a folder */
370
  flat?: boolean;
371
  /** Group related files in subdirectories */
372
  group?: boolean;
373
}
374
```
375

376
## CLI Integration
377

378
NgRx Schematics integrates seamlessly with the Angular CLI:
379

380
- All schematics follow Angular CLI conventions
381
- Supports workspace and project-level configurations
382
- Automatic module imports and provider registration
383
- Template-based code generation with proper naming
384
- Support for both standalone and module-based applications