Platform: NgRx Schematics: Testing and Feedback

[brandonroberts]

This post is to collect feedback on the implementation of schematics. This is not the final documentation, but allows those who want to test the schematics before official release. Subscribe to this issue if you want to be notified of updates.

Installation Instructions

yarn add github:ngrx/schematics-builds --dev

Set as Default Collection

In your .angular-cli.json file, add the following to the defaults section. If you it as set the default, you don't need to add --collection @ngrx/schematics to each blueprint command

    "schematics": {
      "collection": "@ngrx/schematics"
    }

Blueprints

Generate the root state. Specifying the module will update the file with the imports for the root State, and the Store Devtools.

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

Generate a feature state. Specifying the module will update the file with the import for the feature State.

ng generate store path/to/Feature --module feature.module.ts --collection @ngrx/schematics

Generate an actions file.

ng generate action User --collection @ngrx/schematics

Generate a reducer and register the reducer in a module with StoreModule.forFeature.

ng generate reducer User --module path/to/to/feature.module.ts --collection @ngrx/schematics

Generate a reducer and register the reducer in a reducers file. The reducer state interface will be added to the first defined interface in the file and the reducer added to the map of reducers defined with a type of ActionReducerMap.

ng generate reducer User --reducers path/to/reducers/index.ts --collection @ngrx/schematics

Generate an effect and register the reducer in a module with StoreModule.forFeature.

ng generate effect User --module path/to/to/feature.module.ts --collection @ngrx/schematics

Generate a _feature_ (actions file, reducer, effect) and register the reducer in a reducers file. The reducer state interface will be added to the first defined interface in the file and the reducer added to the map of reducers defined with a type of ActionReducerMap.

ng generate feature User --reducers path/to/reducers/index.ts --collection @ngrx/schematics

Generate a _feature_ (actions file, reducer, effect) and register the reducer in a module with StoreModule.forFeature.

ng generate feature User --module path/to/to/feature.module.ts --collection @ngrx/schematics

Generate an entity and register the reducer in a module with StoreModule.forFeature.

ng generate entity User --module path/to/to/feature.module.ts --collection @ngrx/schematics

Generate an entity and register the reducer in a reducers file. The reducer state interface will be added to the first defined interface in the file and the reducer added to the map of reducers defined with a type of ActionReducerMap.

ng generate entity User --reducers path/to/reducers/index.ts --collection @ngrx/schematics

[brandonroberts]

cc: @ebduhon @peterbsmith2 @RoopeHakulinen @sharikovvladislav

[peterbsmyth]

cc: @zoitsa @kseniya292

[sharikovvladislav]

1 Installation

@brandonroberts did you mean:

yarn add github:ngrx/schematics-builds --dev

?

I get this if I follow instruction:

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-tests-for-user-info [+!$]
$ yarn add github:ngrx/schematics --dev
yarn add v1.3.2

[1/4] 🔍  Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://[email protected]/ngrx/schematics.git
Directory: /Users/svlad/dev/ng2-diary-book
Output:
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [+!$]
$

2 path/to/module

path/to/to/feature.module.ts

Maybe I don't know something, but I spend 10 minutes on debugging this. It turns out that I should specify a path to a module from /src/app folder. Shouldn't that be specified explicitly?

I mean...

Not works:

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [!?$]
$ ng generate feature NewFeature --module src/app/app.module.ts --collection @ngrx/schematics

(firstly, I thought, that I should specify path from the root of my project).

Works:

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [!?$]
$ ng generate feature NewFeature --module app.module.ts --collection @ngrx/schematics

3 Create feature in a subfolder

How to put feature to a subfolder of a module in which it is going to be created. Example:

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-schematics-support [!?$]
$ ng generate feature NewFeature --module app.module.ts --collection @ngrx/schematics
Your global Angular CLI version (1.6.0) is greater than your local
version (1.4.5). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
  create src/app/new-feature.actions.ts (270 bytes)
  create src/app/new-feature.reducer.ts (410 bytes)
  create src/app/new-feature.reducer.spec.ts (335 bytes)
  create src/app/new-feature.effects.ts (357 bytes)
  create src/app/new-feature.effects.spec.ts (625 bytes)
  update src/app/app.module.ts (2067 bytes)

It was created in the root of src/app. Near the module. How to create feature in subfolder new-feature? So the path will be like: src/app/new-feature/new-feature.reducer.spec.ts

[brandonroberts]

@sharikovvladislav

1. Yes, fixed.
2. You don't have to specify the root of the project. If you're running the command from the root, it will prepend src/app to what you have entered. So its relative to where you run the command from.
3. To create a feature in a subfolder, add the path to the beginning of the feature name.

ng generate feature new-feature/NewFeature --module app.module.ts --collection @ngrx/schematics

[sharikovvladislav]

1. Yes, I got it now. Shouldn't that be specified explicitly in docs? Or all who use angular/schematics knows it? I didn't find any docs for schematics so I was confused with that a bit.

[brandonroberts]

I think its worth specifying it in the docs. I'm not sure if its common knowledge for Angular schematics

[sharikovvladislav]

Look, I have problem when I have npm linked module.

So, I did:

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-schematics-support 
[!$]
$ npm link jest-preset-angular
/Users/svlad/dev/ng2-diary-book/node_modules/jest-preset-angular -> /usr/local/lib/node_modules/jest-preset-angular -> /Users/svlad/dev/jest-preset-angular

and when I try to generate some stuff I have this:

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-schematics-support [$]
$ ng generate feature NewFeature --module app.module.ts --collection @ngrx/schematics
Your global Angular CLI version (1.6.0) is greater than your local
version (1.4.5). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Error: ENAMETOOLONG: name too long, stat '/Users/svlad/dev/ng2-diary-book/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/fsevents/build/Release/.deps/Users/svlad/dev/jest-preset-angular/example/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64'
ENAMETOOLONG: name too long, stat '/Users/svlad/dev/ng2-diary-book/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/fsevents/build/Release/.deps/Users/svlad/dev/jest-preset-angular/example/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64'

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-schematics-support [$]
$ 

Is it a problem with the ngrx schemes or likely with angular/schematics in general?

[peterbsmyth]

After trial and error I learned the following generates a feature in the root (app.module) module:

ng generate feature User --module app.module.ts --collection @ngrx/schematics

previously i tried:

ng generate feature User --module .src/app/app.module.ts --collection @ngrx/schematics

[peterbsmyth]

I get this tslint prefer const error in my effects file:

file: 'file:///Users/Peter/code/playground/ngrx-schematics-test/src/app/user.effects.spec.ts'
severity: 'Error'
message: 'Identifier 'actions$' is never reassigned; use 'const' instead of 'let'. (prefer-const)'
at: '8,7'
source: 'tslint'
code: 'prefer-const'

[peterbsmyth]

given that generating a new feature works like:

ng generate feature User --module app.module.ts --collection @ngrx/schematics

then

ng generate entity User --reducers index.ts --collection @ngrx/schematics

could work, and make the assumption that there is a reducers/ directory

[peterbsmyth]

ng generate entity User --reducers index.ts --collection @ngrx/schematics

gives:

error! src/app/user.actions.ts already exists.
error! src/app/user.reducer.ts already exists.
error! src/app/user.reducer.spec.ts already exists.

when I previously ran

ng generate feature User --module app.module.ts --collection @ngrx/schematics

It might be helpful to have a "recipes" style docs for when to use which schematics features

[brandonroberts]

@peterbsmith2 agreed. The same rule applies for any of the blueprints. If you prefix the name with a path, it will create that path for you.

Let's say you have a folder called auth with a reducers/index.ts in it. To generate an entity, you would do.

ng generate entity auth/User --reducers reducers/index.ts --collection @ngrx/schematics

The path used in the name would be the same path used in the reducers path

[brandonroberts]

@peterbsmith2 on the const linter error, the reason its not defined yet is because you're supposed to assign the actions to an Observable in your test. Can't change it to a const because you'd immediately have to change it.

[brandonroberts]

@sharikovvladislav that seems like an angular schematics issue to me. Try generating something without using ngrx schematics with the npm linked package and see if you get the same error.

[peterbsmyth]

could there be aliases:

--module (alias -m)
--reducers (alias -r)

state (alias rxs)
action (alias rxa)
reducer (alias rxr)
effect (alias rxe)
entity (alias rxen)
feature (alias rxf)

then

ng generate reducer User --module path/to/to/feature.module.ts --collection @ngrx/schematics

could become

ng g rxr User -m path/to/feature.module.ts -c @ngrx/schematics

[sharikovvladislav]

@brandonroberts

I tried to generate empty angular application and I tried to generate some stuff via schematics in it. Here is the result:

svlad at sharikovvlad in ~/sandbox/schematics-linked-dep-example on master [?]
$ yarn link jest-preset-angular
yarn link v1.3.2
success Using linked module for "jest-preset-angular".
✨  Done in 0.08s.

svlad at sharikovvlad in ~/sandbox/schematics-linked-dep-example on master [?]
$ ng generate enum TrySomeEnum
  create src/app/try-some-enum.enum.ts (28 bytes)

So looks like its ok...

Ok. I added ngrx/schematics-builds dependency to "just-generated" angular app. I tried to generate action and its ok, but.... I tried to generate feature and....:

svlad at sharikovvlad in ~/sandbox/ngrx-schmatics-example on master [!?]
$ ng generate feature User --module app.module.ts --collection @ngrx/schematics
Error: ENAMETOOLONG: name too long, stat '/Users/svlad/sandbox/ngrx-schmatics-example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/fsevents/build/Release/.deps/Users/svlad/dev/jest-preset-angular/example/node_modules/fsevents/lib/binding'
ENAMETOOLONG: name too long, stat '/Users/svlad/sandbox/ngrx-schmatics-example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/jest-preset-angular/example/node_modules/fsevents/build/Release/.deps/Users/svlad/dev/jest-preset-angular/example/node_modules/fsevents/lib/binding'

svlad at sharikovvlad in ~/sandbox/ngrx-schmatics-example on master [!]
$

Are you sure it is not problem in ngrx schematics?

So the rerpo:

1. ng new some-app
2. cd some-app
3. yarn add github:ngrx/schematics-builds --dev
4. decide what package you want to try to link, then go to the directory of the package and run yarn link in it
5. now return back to our test project directory
6. ng generate feature User --module app.module.ts --collection @ngrx/schematics
7. the error

[brandonroberts]

@peterbsmith2 there are already aliases setup for the blueprints, they just aren't reflected here. You can see the collection schema here.

https://github.com/ngrx/platform/blob/master/modules/schematics/collection.json

@sharikovvladislav I'll take a look.

[peterbsmyth]

@brandonroberts https://github.com/ngrx/platform/blob/master/modules/schematics/collection.json#L76 reducer does not have an alias "r". You might want that. Thumbs up are easy on github. You can thumbs up and then I can do a tiny PR.

[sharikovvladislav]

@peterbsmith2 Just do it.

@brandonroberts should I create an issue?

[brandonroberts]

@sharikovvladislav yes, go ahead and create an issue

[crimsonskyfalling]

@brandonroberts ,

1. To create a feature in a subfolder, add the path to the beginning of the feature name.
   ng generate feature new-feature/NewFeature --module app.module.ts --collection @ngrx/schematics

The above works, but i can't generate a subfolder'd feature with it's subfolder module.. which is how i'd expect to use it.

1. ng g m new-feature -m app.module.ts
2. ng g feature new-feature/NewFeature --module new-feature/new-feature.module.ts -c @ngrx/schematics

Result:
ng g m new-feature -m app.module.ts
create src/app/new-feature/new-feature.module.ts (191 bytes)
ng generate feature new-feature/NewFeature -module new-feature/new-feature.module.ts
Error: Specified module does not exist
Specified module does not exist

or, am i doing it wrong?

thnx.

[RoopeHakulinen]

@crimsonskyfalling At least you have only single dash in the module parameter (-module instead of --module).

[crimsonskyfalling]

@RoopeHakulinen, hrm, i thought the -m was the angular module flag... I'm getting same result.

[RoopeHakulinen]

Yes, you are right, my bad :)

[brandonroberts]

@crimsonskyfalling this path is implicit. The path you provide for the feature will be the same path provided by the module.

ng g m new-feature -m app.module.ts
ng generate feature new-feature/NewFeature --module new-feature.module.ts

[crimsonskyfalling]

@brandonroberts,

thank you, that works, sorry I thought i had already tried that before posting and got incorrect results. my apology for the noise.

[crimsonskyfalling]

so i found my confusion...

ng g m new-feature -m app.module.ts
create src/app/new-feature/new-feature.module.ts (194 bytes)
update src/app/app.module.ts (482 bytes)

ng generate feature new-feature/NewFeature --module new-feature.module.ts
create src/app/new-feature/new-feature.actions.ts (281 bytes)
create src/app/new-feature/new-feature.reducer.ts (432 bytes)
create src/app/new-feature/new-feature.reducer.spec.ts (348 bytes)
create src/app/new-feature/new-feature.effects.ts (369 bytes)
create src/app/new-feature/new-feature.effects.spec.ts (650 bytes)
update src/app/new-feature/new-feature.module.ts (517 bytes)

ng generate entity new-feature/NewEntity --module new-feature/new-feature.module.ts
create src/app/new-feature/new-entity.actions.ts (2108 bytes)
create src/app/new-feature/new-entity.model.ts (48 bytes)
create src/app/new-feature/new-entity.reducer.ts (1746 bytes)
create src/app/new-feature/new-entity.reducer.spec.ts (346 bytes)
update src/app/new-feature/new-feature.module.ts (636 bytes)

So,
a) it's implicit on feature gen, but not entity gen... Because If i don't put the module folder on the entity gen, the entity files end up in the src/app root and not the feature root, even though it updates the module...

b) I can't seem to figure the proper pattern to get it to gen the NewEntity files in the feature folder, update the feature module file, AND register the new entity in the features reducer... I keep ending up with a second StoreModule.forFeature() call in the module or an error when trying to specify --reducers and --module on the entity

Is my flow/usecase above wrong?

[brandonroberts]

@crimsonskyfalling your use case is valid.

a) There is a bug in the entity blueprint that wasn't adding the provided path to the scaffolded files. I have a fix in the works that should land soon.

b) The fix should resolve this issue also.

[brandonroberts]

@sharikovvladislav @crimsonskyfalling please pull the latest build from schematics and verify your issues are resolved.

[sandangel]

How do we generate action boilerplate base on predefined action? For example, after adding some more action class to user.action.ts, I want to regenerated all boilerplate like update enum and union type.

[brandonroberts]

@sandangel that's not covered by what schematics do right now. Its an easy way to scaffold out your initial actions files. Your enums require more information for the action type.

[crimsonskyfalling]

@brandonroberts,

Looking good, Initial case seems resolved, of course i took my next step to an actual gen run and have a new finding. Not sure if i should be opening fresh items on any of this or not.. but

ng g m new-feature -m app.module.ts
ng generate feature new-feature/NewFeature --module new-feature.module.ts --flat=true
ng generate entity new-feature/NewEntity1 --reducers new-feature.reducer.ts --flat=false
ng generate entity new-feature/NewEntity2 --reducers new-feature.reducer.ts --flat=false
ng generate entity new-feature/NewEntity3 --reducers new-feature.reducer.ts --flat=false

Issue:
entity reducer import paths added to new-feature.reducer.ts are _incorrect path when --flat=false_.
import * as fromNewEntity1 from './new-entity1.reducer';
should be './new-entity1/new-entity1.reducer'

thanks for all the work on this! very promising!

[crimsonskyfalling]

@brandonroberts,

Second Issue:
a) generated entity.actions.ts are invalid. (ng generate entity NewEntity)
_invalid import reference_ import { Update } from '@ngrx/entity';
_invalid constructor_ constructor(public payload: { new-entitys: Update<NewEntity>[] }) {}

b) inconsistent normalizing var name of NewEntity payload key
new-entity.actions.ts uses new-entity
new-entity.reducer.ts uses newentity

I have @ngrx/entity@latest.. so not sure what's up here, just noticed the squiggles

[crimsonskyfalling]

Third Issue:
a) creating a new entity in a feature module should generate entity effects
ng generate entity new-feature/NewEntity --reducers new-feature.module.ts --flat=false

b) generating effects should update existing modules EffectsModule.forFeature([]); (prepend/append?)
ng generate effect new-feature/new-entity/NewEntity --module adop/adop.module.ts

[brandonroberts]

@crimsonskyfalling

First issue
a) I have a fix for the non-flat entity
b) The --reducers option is for placing your reducer state interface into an existing interface and the reducer function into an existing reducer map. You would provide your reducers file where your states are rolled up to. See https://github.com/ngrx/platform/blob/master/example-app/app/reducers/index.ts#L32-L45

Second issue
a) The Update import is in master, but not in the latest release of @ngrx/entity. You'll need to install the latest nightly for this.
b) I have a fix for this that will make the normalizing consistent with camelCase

Third Issue:
a) We don't know how you are going to use the actions. Normally you would have some service that performs the HTTP requests and then use those in an effect with these actions. This involves additional actions to handle success/failure.
b) For the initial release, it will generate an additional import. I'm going to work on appending to the array if the Effects.forRoot/forFeature import already exists.

[crimsonskyfalling]

@brandonroberts, I.a, II, III.b - Thank you. i believe I need to clarify / check my use case and intent behind I.b and III.a more, thinking..

[brandonroberts]

@crimsonskyfalling and all. The latest build has the last set of fixes. It also adds support for appending Effects in the forRoot/forFeature arrays. I'm considering the schematics to be feature complete for the initial release at this point unless another significant bug surfaces.

[crimsonskyfalling]

@brandonroberts,

I did some extensive testing today. I have 2 open issues, and although both are easily fixable either manually or with an additional post gen task... They are the only things now preventing me from immediately running a successful build/serve after a full generation run, out of the box, which would be ideal for my full case:

Original Test Case

ng g m new-feature -m app.module.ts
ng generate feature new-feature/NewFeature --module new-feature.module.ts

2nd Test Case:

ng g m new-feature2 -m app.module.ts
ng generate feature new-feature2/NewFeature2 --module new-feature2.module.ts --flat=true
ng generate entity new-feature2/NewEntity1 --reducers new-feature2.reducer.ts --flat=false
ng generate entity new-feature2/NewEntity2 --reducers new-feature2.reducer.ts --flat=false
ng generate entity new-feature2/NewEntity3 --reducers new-feature2.reducer.ts --flat=false

Results Ok, generated code is acceptable.

Full Use Case:

ng g m NewFeature3 -m app.module.ts
ng generate feature new-feature3/NewFeature3 --module new-feature3.module.ts --flat=true

ng generate feature new-feature3/FeatureGroup1 --module new-feature3.module.ts --reducers new-feature3.reducer.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity1 --reducers feature-group1.reducer.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity2 --reducers feature-group1.reducer.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity3 --reducers feature-group1.reducer.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity4 --reducers feature-group1.reducer.ts --flat=false

ng generate feature new-feature3/FeatureGroup2 --module new-feature3.module.ts --reducers new-feature3.reducer.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity1 --reducers feature-group2.reducer.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity2 --reducers feature-group2.reducer.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity3 --reducers feature-group2.reducer.ts --flat=false

ng generate feature new-feature3/FeatureGroup3 --module new-feature3.module.ts --reducers new-feature3.reducer.ts --flat=false
ng generate entity new-feature3/feature-group3/Entity1 --reducers feature-group3.reducer.ts --flat=false
ng generate entity new-feature3/feature-group3/Entity2 --reducers feature-group3.reducer.ts --flat=false

Results 1 Issue, 1 Enhancement Request

Issue

ng generate feature new-feature3/FeatureGroup --module new-feature3.module.ts --reducers new-feature3.reducer.ts --flat=false
wrong path create src/app/new-feature3/feature-group.actions.ts
ok create src/app/new-feature3/feature-group/feature-group.reducer.ts
ok create src/app/new-feature3/feature-group/feature-group.reducer.spec.ts
ok create src/app/new-feature3/feature-group/feature-group.effects.ts
ok create src/app/new-feature3/feature-group/feature-group.effects.spec.ts

Enchancement Req:

ng generate entity new-feature3/feature-group3/Entity1 --reducers feature-group3.reducer.ts --flat=false

• add fromEntity1.initialState to feature-group3.reducer.ts's initialState declaration.
• rational?: the initalState is required, is being defined in the Entity1 reducer, and in this context, should be added by default to the sub-feature.reducer.ts's initialState declaration along with the fromEntity.State that's already being added..

update: i was able to address my initialState request via: https://gist.github.com/crimsonskyfalling/be5c82807a67bdb9d9ae4506f52c9189 but i don't know if i broke anything else, since i only tested my cases above. I couldn't get the actions in the right spot though.

[brandonroberts]

@crimsonskyfalling the action path has a PR in for the fix. For the enhancement request, I think you should use a different flow to generate feature/sub-feature states. The same PR changes the feature store imports to wildcards to account for duplicates.

ng g m NewFeature3 -m app.module.ts --flat=false
ng generate store new-feature3/feature-group1/FeatureGroup1 --module new-feature3/new-feature3.module.ts
ng generate entity new-feature3/feature-group1/Entity1 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity2 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity3 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group1/Entity4 --reducers ./reducers/index.ts --flat=false

ng generate store new-feature3/feature-group2/FeatureGroup2 --module new-feature3/new-feature3.module.ts
ng generate entity new-feature3/feature-group2/Entity1 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity2 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity3 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group2/Entity4 --reducers ./reducers/index.ts --flat=false

ng generate store new-feature3/feature-group3/FeatureGroup3 --module new-feature3/new-feature3.module.ts
ng generate entity new-feature3/feature-group3/Entity1 --reducers ./reducers/index.ts --flat=false
ng generate entity new-feature3/feature-group3/Entity2 --reducers ./reducers/index.ts --flat=false

[Kaffiend]

Is there a way to generate the feature actions, effects, reducers etc.. to be in their own directory? like the example app's structure?
ng g feature configuration --reducers ./reducers/root.reducer.ts --module configuration --flat=false --dry-run

to get this output.

  create src/app/configuration/actions/configuration.actions.ts (305 bytes)
  create src/app/configuration/reducers/configuration.reducer.ts (449 bytes)
  create src/app/configuration/reducers/configuration.reducer.spec.ts (353 bytes)
  create src/app/configuration/effects/configuration.effects.ts (386 bytes)
  create src/app/configuration/effects/configuration.effects.spec.ts (667 bytes)
  update src/app/reducers/root.reducer.ts (2240 bytes)
  update src/app/configuration/configuration.module.ts (928 bytes)

Edit: This question just relates to the feature schematic. You can do each individually just fine as is. Simply a convenience question with the feature generation.

[brandonroberts]

@Kaffiend we just merged a PR that adds that feature. And FYI, you shouldn't use the reducers and module options together. The reducers options is for adding to an existing map, while the module option registers it using StoreModule.forFeature

[Kaffiend]

Awesome, Thanks! Good to know!

[baumblatt]

Hello @brandonroberts,

Congratulations for the excellent job until now, let me share a couple comments after my first use:

ng generate store core/store/MyState --root --module core/core.module.ts.

The custom name MyState was not respected. The 'State' name is hardcoded in the respective index.ts, I changed it to <%= classify(name) %> in lines 10, 14 and 19 and works.

ng generate feature sample/store/Todo --module ../sample.module.ts

Because I like to put ngrx stuffs incide the store folder, the command for feature sounds a little strange for my case, it would be better if I could reference the module full path, in my case --module sample/sample.module.ts.

ng generate feature sample/store/Postdone --module ../sample.module.ts

This is the sample.module.ts result:

StoreModule.forFeature('todo', fromTodo.reducer),
EffectsModule.forFeature([TodoEffects, PostdoneEffects]),
StoreModule.forFeature('postdone', `fromPostdone.reducer)

I don't know if the code above will work, any way, it would be awesome if it could be like below:

StoreModule.forFeature('sample', [fromTodo.reducer, fromPostdone.reducer]),
EffectsModule.forFeature([TodoEffects, PostdoneEffects])

Finally, is there a way to spread actions, reducers and effects in your own folders inside the store folder.

Best regards,
Bernardo Baumblatt

[brandonroberts]

@baumblatt thanks!

1. The State being hardcoded was an explicit choice of being a sensible default because the Angular CLI required a name argument. I'm fine with making the required name configurable to whatever you want to interface name to be.
2. The full path is provided from the CLI and is applied to the path of the blueprint and the module, so there isn't much I can do there. You provide the path to the module relative to the path for the blueprint.
3. You can generate the structure you want that way by generating a feature store and then generating feature reducers that are added to that feature store.

ng generate module MyFeature --flat=false -m app.module.ts
ng generate store my-feature/sample --statePath store -m my-feature/my-feature.module.ts
ng generate feature my-feature/store/Post --group --reducers index.ts
ng generate feature my-feature/store/Todo --group --reducers index.ts

1. Its not documented yet, but you can use the --group argument when generating a feature to nest actions, reducers and effects in their respective folders.

[nogtini]

Late to the game, but encountering similar difficulty with the "want to generate a feature set with entities and effects" use case.

I can generate entities without effects, or I can generate features without entities, but not a feature with both.

$ ng generate feature User --module app.module.ts --collection @ngrx/schematics
  create src/app/user.actions.ts (222 bytes)
  create src/app/user.reducer.ts (373 bytes)
  create src/app/user.reducer.spec.ts (322 bytes)
  create src/app/user.effects.ts (320 bytes)
  create src/app/user.effects.spec.ts (588 bytes)
  update src/app/app.module.ts (1619 bytes)

$ ng generate entity User --reducers reducers/index.ts --collection @ngrx/schematics
error! src/app/user.actions.ts already exists.
error! src/app/user.reducer.ts already exists.
error! src/app/user.reducer.spec.ts already exists.

Would be nice to have an --entity flag on ng generate feature that generates entities for your actions/reducers within the feature set.

[dereklin]

For a Feature setup in particular, Is there a one line command to generate something like this?

https://github.com/UltimateAngular/ngrx-store-effects-app/tree/27-testing-effects/src/products/store

I tried it when the folder store is not created yet, I got this error:

Error: Specified module does not exist
Specified module does not exist