@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

@ngrx/schematics

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

9.0.0-beta.0 (2020-02-06)

Bug Fixes

• data: allow additional selectors in entitySelectors$ (#2332) (900bf75)
• effects: dispatch init action once (#2164) (a528320), closes #2106
• effects: fix specs for ng-add tests (#2314) (98d6606)
• schematics: migrate spec to skipTest to be in line with Angular CLI (#2253) (714ae5f), closes #2242
• store: add not allowed check to action creator config (#2313) (f6336d5)
• store: allow union of types in props (#2301) (33241cb)
• store: replace Creator with ActionCreator on createAction (#2299) (fe6bfa7)

Chores

• update deps to Angular version 9 (#2234) (b146af5)

Code Refactoring

• schematics: Flag minimal is set to true (#2258) (7ecaa22), closes #2250
• schematics: migrate from styleext to style (#2254) (2801018), closes #2248

Features

• component: initial setup (#2257) (b8a769a)
• docs: add presskit page (#2296) (9ac1165), closes #2293
• effects: add migration for breaking change that renames effects error handler config key (#2335) (93b4081)
• effects: make resubscription handler overridable (#2295) (3a9ad63), closes #2294
• entity: deprecate addAll and rename it to setAll (#2348) (27f5059), closes #2330
• router: enabling MinimalRouterStateSerializer by default (#2326) (ba37ad8), closes #2225
• router-store: add migration to add the default serializer (#2291) (b742a8c)
• schematics: update creators to the default (6149753)
• store: add default generic type to Store and MockStore (#2325) (09daeb9)
• store: ignore actions from NgRx libraries in runtime checks (#2351) (0dabfc4)
• update to Angular 9-rc.13 (#2345) (d7fdf7f)
• store: add clearResult to reset a mock selector (#2270) (803295b), closes #2244
• store: compile time errors when action creators being passed to dispatch without () (#2306) (98b74ad)
• store: enable immutability checks by default (#2266) (1758d34), closes #2217
• store: testing - expose MockStore provider (#2331) (ef5cd5f), closes #2328

BREAKING CHANGES

• router: The MinimalRouterStateSerializer is enabled by default.

BEFORE:

If no router state serializer is provided through the configuration of router store, the DefaultRouterStateSerializer is used.

AFTER:

If no router state serializer is provided through the configuration of router store, the MinimalRouterStateSerializer is used.

• effects: resubscribeOnError renamed to useEffectsErrorHandler in createEffect metadata

BEFORE:

class MyEffects {
  effect$ = createEffect(() => stream$, {
    resubscribeOnError: true, // default
  });
}

AFTER:

class MyEffects {
  effect$ = createEffect(() => stream$, {
    useEffectsErrorHandler: true, // default
  });
}

• effects: BEFORE:

When the effect class was registered, the init action would be dispatched. If the effect was provided in multiple lazy loaded modules, the init action would be dispatched for every module.

AFTER:

The init action is only dispatched once The init action is now dispatched based on the identifier of the effect (via ngrxOnIdentifyEffects)

• schematics: To be inline with the Angular CLI, we migrated the --spec to --skipTest. By default skipTest is false, this way you will always be provided with *.spec.ts files

BEFORE:

ng generate action User --spec

AFTER:

ng generate action User

• store: BEFORE:

Using mockSelector.setResult(undefined) resulted in clearing the return value.

AFTER:

Using mockSelector.setResult(undefined) will set the return value of the selector to undefined. To reset the mock selector, use mockSelector.clearResult().

• schematics: To be inline with the Angular CLI, the styleExt option has been changed to style.

BEFORE:

"@schematics/angular:component": {
      "inlineStyle": true,
      "prefix": "aio",
      "styleext": "scss"
    }
...

AFTER:

"@schematics/angular:component": {
      "inlineStyle": true,
      "prefix": "aio",
      "style": "scss"
    }
....

• store: Immutability checks are enabled by default.

BEFORE:

Immutability checks are opt-in.

AFTER:

If state or action is mutated then there will be a run time exception thrown.

• schematics: With this change by default the minimal setup for @ngrx/store will be generated.

BEFORE:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      }
    }),
    .....
  ],
  providers: [],
  bootstrap: [AppComponent]
})

AFTER:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({})
    ....
  ],
  providers: [],
  bootstrap: [AppComponent]
})

• schematics: BEFORE:

The create functions weren't the default to create actions, reducers and effects

AFTER:

The create functions are the default to create actions (createAction, reducers (createReducer) and effects (createEffect) To fallback to the previous generators, use

sh ng generate reducer ReducerName --creators=false

• Libraries will depend on Angular version 9

<a name="8.6.0"></a>