Schematics

This repository contains schematics for generating NGXS Store in Angular apps using the Angular CLI.

Installation

Install Angular CLI

You should be using @angular/[email protected] or newer.

npm i -g @angular/cli

Install NGXS Schematics

npm i @ngxs/schematics

Easy way to add NGXS Store in your application

To add NGXS Store in application, you can use ng add with @ngxs/schematics.

ng add @ngxs/schematics

Result:

Installed packages for tooling via npm.

  Adding npm dependencies

  ✅️ Added "@ngxs/devtools-plugin" into dependencies
  ✅️ Added "@ngxs/logger-plugin" into dependencies
  ✅️ Added "@ngxs/store" into dependencies
  ✅️ Added "@ngxs/schematics" into devDependencies

  Adding @ngxs/schematics to angular.json

  UPDATE package.json (2920 bytes)
  ✅️ Setting NGXS Schematics as default

  👏 Create your first ngxs store by using starter kit: ng g ngxs-sk --spec

  🔍 Installing packages...

Usage

Generating Components

You can use the ng generate (or just ng g) command to generate ngxs components:

ng generate @ngxs/schematics:store --name todo
ng g @ngxs/schematics:store --name todo

All possible commands in the table below:

Aliases

For used the aliases you need to set @ngxs/schematics as the default collection. Update your project's angular.json:

"cli": {
  "defaultCollection": "@ngxs/schematics"
}

Or simply use ng add @ngxs/schematics --skipInstall

Options

--name - there is a name of your store, state or actions
--spec - flag that allow to generate the test file
--sourceRoot - absolute path to create your files (in default - src)
--path - path relative to --sourceRoot (for example, --path=app -> /src/app)

Examples

Create a NGXS Store

To generate store with @ngxs/schematics:

ng generate @ngxs/schematics:store --name todo

Result:

CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.ts

Or with spec:

ng generate @ngxs/schematics:store --name todo --spec

Result:

CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.ts

Create a NGXS State

To generate state with @ngxs/schematics:

ng generate @ngxs/schematics:state --name todo

Result:

CREATE src/todo/todo.state.ts

Or with spec:

ng generate @ngxs/schematics:state --name todo --spec

Result:

CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.ts

Create a NGXS Actions

To generate state with @ngxs/schematics:

ng generate @ngxs/schematics:actions --name todo

Result:

CREATE src/todo/todo.actions.ts

NGXS Starter Kit

Usage

To generate store with @ngxs/schematics:starter-kit:

ng generate @ngxs/schematics:starter-kit

Result:

CREATE src/store/store.config.ts
CREATE src/store/store.module.ts
CREATE src/store/auth/auth.actions.ts
CREATE src/store/auth/auth.state.ts
CREATE src/store/dashboard/index.ts
CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
CREATE src/store/dashboard/states/user/user.actions.ts
CREATE src/store/dashboard/states/user/user.state.ts

Or with spec:

ng generate @ngxs/schematics:starter-kit --spec

Result:

CREATE src/store/store.config.ts
CREATE src/store/store.module.ts
CREATE src/store/auth/auth.actions.ts
CREATE src/store/auth/auth.state.spec.ts
CREATE src/store/auth/auth.state.ts
CREATE src/store/dashboard/index.ts
CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.spec.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
CREATE src/store/dashboard/states/user/user.actions.ts
CREATE src/store/dashboard/states/user/user.state.spec.ts
CREATE src/store/dashboard/states/user/user.state.ts