Schematics

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

Installation

$3

You should be using @angular/cli@6.1.0 or newer.

``bash
npm i -g @angular/cli
`

$3

`bash
npm i @ngxs/schematics
`

$3

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

`bash
ng add @ngxs/schematics
`

| Option | Description
| --- | ---
| --skipInstall | The flag to skip packages installing

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

$3

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

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

All possible commands in the table below:

| Scaffold | Usage | Aliases | Options
| --- | --- | --- | ---
| Store | ng g @ngxs/schematics:store | ngxs-store | --name (required), --path, --sourceRoot, --spec (boolean)
| State | ng g @ngxs/schematics:state | ngxs-state | --name (required), --path, --sourceRoot, --spec (boolean)
| Actions | ng g @ngxs/schematics:actions | ngxs-actions | --name (required), --path, --sourceRoot
| Starter Kit | ng g @ngxs/schematics:starter-kit | ngxs-sk | --path, --sourceRoot, --spec (boolean)

$3

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

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

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

$3

--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

$3

To generate store with @ngxs/schematics:

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

Result:

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

`

Or with spec:

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

Result:

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

$3

To generate state with @ngxs/schematics:

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

Result:

`ts
CREATE src/todo/todo.state.ts

`

Or with spec:

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

Result:

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

$3

To generate state with @ngxs/schematics:

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

Result:

`ts
CREATE src/todo/todo.actions.ts

`

NGXS Starter Kit

$3

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

`bash
ng generate @ngxs/schematics:starter-kit
`

Result:

`ts
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:

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

Result:

`ts
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
``