or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

action-generation.mdcomponent-store.mdcontainer-components.mddata-services.mdeffect-generation.mdentity-management.mdfeature-generation.mdindex.mdngrx-push-migration.mdreducer-generation.mdselector-generation.mdstore-setup.mdutility-functions.md
tile.json

tessl/npm-ngrx--schematics

Angular CLI schematics for generating NgRx state management code including actions, reducers, effects, selectors, and feature modules.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ngrx/schematics@20.0.x

To install, run

npx @tessl/cli install tessl/npm-ngrx--schematics@20.0.0

index.mddocs/

NgRx Schematics

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.

Package Information

  • Package Name: @ngrx/schematics
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D @ngrx/schematics

Core Usage

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

# Initialize NgRx in your project
ng add @ngrx/schematics

# Generate various NgRx constructs
ng generate @ngrx/schematics:store AppState --root
ng generate @ngrx/schematics:action User
ng generate @ngrx/schematics:reducer User
ng generate @ngrx/schematics:effect User
ng generate @ngrx/schematics:selector User

Basic Usage

# Install NgRx schematics in your Angular project
ng add @ngrx/schematics

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

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

# Generate individual components
ng generate @ngrx/schematics:action User --api
ng generate @ngrx/schematics:reducer User
ng generate @ngrx/schematics:effect User
ng generate @ngrx/schematics:selector User

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

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

# Generate component store
ng generate @ngrx/schematics:component-store UserStore

Architecture

NgRx Schematics is built around several core components:

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

Capabilities

Store Initialization

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

interface StoreSchema {
  name?: string;
  path?: string;
  project?: string;
  flat?: boolean;
  skipTests?: boolean;
  module?: string;
  statePath?: string;
  root?: boolean;
  stateInterface?: string;
  minimal?: boolean;
}

Store Setup

Action Generation

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

interface ActionSchema {
  name: string;
  prefix?: string;
  path?: string;
  project?: string;
  flat?: boolean;
  group?: boolean;
  api?: boolean;
}

Action Generation

Reducer Generation

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

interface ReducerSchema {
  name: string;
  path?: string;
  project?: string;
  flat?: boolean;
  group?: boolean;
  reducers?: string;
  feature?: boolean;
  creators?: boolean;
}

Reducer Generation

Effect Generation

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

interface EffectSchema {
  name: string;
  path?: string;
  project?: string;
  flat?: boolean;
  group?: boolean;
  module?: string;
  feature?: boolean;
  root?: boolean;
  minimal?: boolean;
  creators?: boolean;
}

Effect Generation

Selector Generation

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

interface SelectorSchema {
  name: string;
  path?: string;
  project?: string;
  flat?: boolean;
  group?: boolean;
  feature?: boolean;
}

Selector Generation

Feature State Generation

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

interface FeatureSchema {
  name: string;
  path?: string;
  project?: string;
  flat?: boolean;
  module?: string;
  skipTests?: boolean;
  reducers?: string;
  group?: boolean;
  api?: boolean;
  prefix?: string;
  entity?: boolean;
}

Feature Generation

Entity State Management

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

interface EntitySchema {
  name: string;
  path?: string;
  project?: string;
  skipTests?: boolean;
  reducers?: string;
  module?: string;
  flat?: boolean;
  group?: boolean;
  feature?: boolean;
}

Entity Management

Container Component Generation

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

interface ContainerSchema {
  name: string;
  path?: string;
  project?: string;
  inlineStyle?: boolean;
  inlineTemplate?: boolean;
  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
  changeDetection?: 'Default' | 'OnPush';
  prefix?: string;
  style?: string;
  skipTests?: boolean;
  flat?: boolean;
  skipImport?: boolean;
  selector?: string;
  module?: string;
  export?: boolean;
  state?: string;
  stateInterface?: string;
  testDepth?: 'unit' | 'integration';
  standalone?: boolean;
  displayBlock?: boolean;
}

Container Components

Component Store

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

interface ComponentStoreSchema {
  name: string;
  path?: string;
  project?: string;
  flat?: boolean;
  skipTests?: boolean;
  component?: string;
  module?: string;
}

Component Store

Data Services

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

interface DataSchema {
  name: string;
  path?: string;
  project?: string;
  skipTests?: boolean;
  flat?: boolean;
  group?: boolean;
}

Data Services

NgRx Push Migration

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

interface NgRxPushMigrationSchema {
  // This migration schematic has no configurable properties
}

NgRx Push Migration

Shared Utilities

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

// String manipulation utilities
export function decamelize(str: string): string;
export function dasherize(str?: string): string;
export function camelize(str: string): string;
export function classify(str: string): string;
export function underscore(str: string): string;
export function capitalize(str: string): string;
export function pluralize(str: string): string;
export function group(name: string, group: string | undefined): string;
export function featurePath(
  group: boolean | undefined,
  flat: boolean | undefined,
  path: string,
  name: string
): string;

// AST manipulation functions
export function findNodes(
  node: ts.Node,
  kind: ts.SyntaxKind,
  max?: number
): ts.Node[];

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

export function insertImport(
  source: ts.SourceFile,
  fileToEdit: string,
  symbolName: string,
  fileName: string,
  isDefault?: boolean
): Change;

export function addDeclarationToModule(
  source: ts.SourceFile,
  modulePath: string,
  classifiedName: string,
  importPath: string
): Change[];

export function addImportToModule(
  source: ts.SourceFile,
  modulePath: string,
  classifiedName: string,
  importPath: string
): Change[];

export function addProviderToModule(
  source: ts.SourceFile,
  modulePath: string,
  classifiedName: string,
  importPath: string
): Change[];

export function addProviderToComponent(
  source: ts.SourceFile,
  componentPath: string,
  classifiedName: string,
  importPath: string
): Change[];

// Project utilities
function getProjectPath(host: Tree, options: any): string;
function findModuleFromOptions(host: Tree, options: any): string;
function isLib(host: Tree, options: any): boolean;

Utility Functions

Common Schema Properties

All schematics share common configuration properties:

interface BaseSchema {
  /** Name of the generated item */
  name: string;
  /** Path where files should be generated */
  path?: string;
  /** Angular project to target */
  project?: string;
  /** Generate files without creating a folder */
  flat?: boolean;
  /** Group related files in subdirectories */
  group?: boolean;
}

CLI Integration

NgRx Schematics integrates seamlessly with the Angular CLI:

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