@ngrx/schematics

What is @ngrx/schematics?

@ngrx/schematics is a collection of Angular schematics for generating NgRx files such as actions, reducers, effects, and more. It helps streamline the process of setting up and maintaining NgRx in Angular applications.

What are @ngrx/schematics's main functionalities?

Generate Store

This command generates a new NgRx store with the specified state and sets it up in the root module. It creates necessary files and boilerplate code for the store.

ng generate @ngrx/schematics:store State --root --module app.module.ts

Generate Actions

This command generates a new set of actions for a specified feature (e.g., User). It creates an actions file with predefined action types and classes.

ng generate @ngrx/schematics:action User

Generate Reducer

This command generates a new reducer for a specified feature (e.g., User). It creates a reducer file with initial state, reducer function, and necessary imports.

ng generate @ngrx/schematics:reducer User

Generate Effects

This command generates a new effect for a specified feature (e.g., User). It creates an effects file with boilerplate code for handling side effects in NgRx.

ng generate @ngrx/schematics:effect User

Other packages similar to @ngrx/schematics

@angular/cli

@angular/cli is the official Angular CLI tool that provides a wide range of commands for generating and managing Angular projects. While it does not specifically focus on NgRx, it can be extended with custom schematics to include NgRx-related functionality.

nx

Nx is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft. It provides powerful CLI commands for generating and managing Angular applications, including support for NgRx. Nx offers more advanced features for managing large-scale projects compared to @ngrx/schematics.

schematics-utilities

schematics-utilities is a utility library for Angular schematics that provides helper functions for creating and modifying Angular projects. It can be used to create custom schematics, including those for NgRx, but requires more manual setup compared to @ngrx/schematics.

README

The README file is missing

Changelog

14.0.0-beta.0 (2022-05-30)

• Closes #3344, #3345 (70056a8), closes #3344 #3345

Bug Fixes

• store: rename template literal to string literal for createActionGroup (#3426) (7d08db1)

Features

• schematics: remove creators option (#3311) (e86278a)
• update Angular packages to latest v14 RC (#3425) (f15dd1e), closes #3417
• component: add error as value to LetDirective's context (#3380) (6452e24), closes #3343
• component: add suspense template input to LetDirective (#3377) (345ee53), closes #3340
• component: use global render strategy in zone-less mode (#3379) (f233dae), closes #3342
• component-store: add OnStoreInit and OnStateInit lifecycle hooks (#3368) (0ffed02), closes #3335
• eslint-plugin: add NgRx ESLint Plugin (#3373) (ae0041b)
• store: add createActionGroup function (#3381) (2cdecb3), closes #3337
• store: install and configure the @ngrx/eslint-plugin on ng-add (#3386) (bf2672e)

Performance Improvements

• component: reset state / trigger CD only if necessary (#3328) (f5b055b)

BREAKING CHANGES

• 1. The context of LetDirective is strongly typed when null or undefined is passed as input.

BEFORE:

<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>

• The type of n is any.
• The type of u is any.

AFTER:

<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>

• The type of n is null.
• The type of u is undefined.

• schematics: BEFORE:

Creating actions, reducers, and effects is possible without using the creator syntax is possible.

AFTER:

• All schematics use the non-creator syntax to scaffold the code.
• The option --creators (and -c) is removed from the schematic options.
• The skipTests option is removed while generating actions.

• Minimum version of Angular has been updated

BEFORE:

Minimum version of Angular was 13.x

AFTER:

Minimum version of Angular is 14.x

• component: The native local rendering strategy is replaced by global in zone-less mode for better performance.

BEFORE:

The change detection is triggered via changeDetectorRef.detectChanges in zone-less mode.

AFTER:

The change detection is triggered via ɵmarkDirty in zone-less mode.

• component: The $error property from LetDirective's view context is a thrown error or undefined instead of true/false.

BEFORE:

<p *ngrxLet="obs$; $error as e">{{ e }}</p>

• e will be true when obs$ emits error event.
• e will be false when obs$ emits next/complete event.

AFTER:

<p *ngrxLet="obs$; $error as e">{{ e }}</p>

• e will be thrown error when obs$ emits error event.
• e will be undefined when obs$ emits next/complete event.

<a name="13.1.0"></a>