This repository contains schematics for generating NGXS Store in Angular apps using the Angular CLI.
You should be using @angular/[email protected] or newer.
npm i -g @angular/clinpm i @ngxs/schematicsTo add NGXS Store in application, you can use ng add with @ngxs/schematics.
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...
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 todoAll 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) |
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
--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)
To generate store with @ngxs/schematics:
ng generate @ngxs/schematics:store --name todoResult:
CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.tsOr with spec:
ng generate @ngxs/schematics:store --name todo --specResult:
CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.tsTo generate state with @ngxs/schematics:
ng generate @ngxs/schematics:state --name todoResult:
CREATE src/todo/todo.state.tsOr with spec:
ng generate @ngxs/schematics:state --name todo --specResult:
CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.tsTo generate state with @ngxs/schematics:
ng generate @ngxs/schematics:actions --name todoResult:
CREATE src/todo/todo.actions.tsTo generate store with @ngxs/schematics:starter-kit:
ng generate @ngxs/schematics:starter-kitResult:
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.tsOr with spec:
ng generate @ngxs/schematics:starter-kit --specResult:
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent