deborahk / angular-ngrx-gettingstarted

Materials for our Pluralsight course: Angular NgRx: Getting Started: http://bit.ly/AngularNgRx.

Angular-ngrx-GettingStarted

Materials for NgRx course.

APM-Demo0: The starter files for this course. Use this to code along with the course.

APM-Demo1: Completed files after the First Look at NgRx module. It demonstrates a very simple NgRx example.

APM-Demo2: Completed files after the Strongly Typing Actions with Action Creators module. It refactors the simple example to include developer tooling support and strong typing.

APM-Demo3: Completed files after the Working with Effects module. It adds an effect to retrieve data via http. NOTE: Once we move the data retrieval to actions and the store, the create, update, and delete operations no longer work. These features are implemented with the store in the next demo.

APM-Demo4: Completed files after the Performing Update Operations module. It adds the code needed for create, update, and delete operations via http.

APM-Demo5: Completed files after the Architectural Considerations module. It implements the container/presentational component pattern and the OnPush change detection strategy.

NOTE:

• June 30, 2020: This code was modified to Angular version 9 and NgRx version 9. See the CHANGELOG.md file for details.

angular-ngrx-gettingstarted's Issues

Review - Do we need the if block before subscribing to the products state in 'Subscribing to the Store to Get State Changes'

APM-Demo0/src/app/products/product-list/product-list.component.ts

CSS is missing

I just wonder why css

is missing

Module 10, check video suggestion to add the OnChanges lifecycle hook to the ProductListComponent

(added from issue raised in froum)

For the first homework assignment at the end of Module 10, the video says to add the OnChanges lifecycle hook to the ProductListComponent, but I think this is supposed to be added to the ProductEditComponent. I checked the Demo5 folder, and OnChanges was added to the edit component.

Thank you for yet another excellent course.

Issue on NgRx installations

After installing ngrx/store through npm, showing these below compilations error

ERROR in node_modules/@ngrx/store/src/dispatcher.ts(1,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/dispatcher.ts(16,10): error TS2339: Property 'next' does not exist on type 'Dispatcher'.
node_modules/@ngrx/store/src/ng2.ts(1,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.
node_modules/@ngrx/store/src/reducer.ts(1,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/BehaviorSubject"' has
no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.ts(1,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/operator/withLatestFrom"' has no exported member 'withLatestFrom'.
node_modules/@ngrx/store/src/state.ts(2,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/operator/scan"' has no exported member 'scan'.
node_modules/@ngrx/store/src/state.ts(3,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/operator/observeOn"' has no exported member 'observeOn'.
node_modules/@ngrx/store/src/state.ts(4,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/scheduler/queue"' has no exported member 'queue'.
node_modules/@ngrx/store/src/state.ts(5,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.ts(20,36): error TS2339: Property 'next' does not exist on type 'State'.
node_modules/@ngrx/store/src/store.ts(1,41): error TS2307: Cannot find module '@ngrx/core'.
node_modules/@ngrx/store/src/store.ts(2,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/Observer"' has no exported member 'Observer'.
node_modules/@ngrx/store/src/store.ts(3,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.ts(4,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/Subscriber"' has no exported member 'Subscriber'.
node_modules/@ngrx/store/src/store.ts(5,10): error TS2305: Module '"D:/Angular/Angular-NgRx-GettingStarted/APM-Demo0/node_modules/rxjs/Operator"' has no exported member 'Operator'.
node_modules/@ngrx/store/src/store.ts(20,10): error TS2339: Property 'source' does not exist on type 'Store'.
node_modules/@ngrx/store/src/store.ts(27,11): error TS2339: Property 'operator' does not exist on type 'Store'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Observer.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observer'.
node_modules/rxjs/Operator.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Operator'.
node_modules/rxjs/Subscriber.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscriber'.
node_modules/rxjs/operator/observeOn.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/operator/observeOn'.
node_modules/rxjs/operator/scan.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/operator/scan'.
node_modules/rxjs/operator/withLatestFrom.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/operator/withLatestFrom'.
node_modules/rxjs/scheduler/queue.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/scheduler/queue'.

Add NgRx tests

Hi, Deborah

I loved your NgRx course a lot! Would be great to add tests to this repo or create a new course on Pluralsight on how to test NgRx.

Many thanks!

Node version compatibility issues <= 14.17.5 required

Issue

This was the issue I faced trying to use the course...

10% building 3/3 modules 0 active(node:33268) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)

Downgrading my node version from latest fixed the issue.

Suggested fix

Add a note to the readme.

npm install fails - ERESOLVE unable to resolve dependency tree

After cloning the reporsitory and navigating to APM-Demo0, the command npm install fails with below error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.4.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

After update the below 2 packages version, npm install worked fine

jasmine-core
karma-jasmine-html-reporter

to the versions as shown below

Requesting to update the package.json for all folders. I tried to create a PR but looks like the repo is not open for that

Toggle password not working?

This must be on me, but I don't see what I might be doing wrong.
I did the "homework" for module 4, and the password wasn't becoming visible.
Then I tried the original version - also not.
Did something change in browser security recently? Checked firefox and chrome.
I'm probably going to find tomorrow that I made a silly mistake, IDK.

Store Undefined?

Hello Deborah, I'm following your RNGX course and while coding along I stumble upon an error, this is what it looks like in the console https://i.imgur.com/dWqADQl.png
Is it possible the products are not added to the state, thus the product codes can not be loaded?

Minor bug on adding products when all removed - APM-0, APM-1, APM-2

Hello,

Really appreciate your work and your courses. Kudos! :)

Found a small bug, when all the products are removed, it is not possible to add a new one without explicitly mentioning an id.
Have the fix on a separate branch ready for PR, cannot push it sadly, 403.

Best regards,
Deian

APM-Demo5 npm install fails

npm install for APM-Demo5 failed on a fresh clone with an error about conflicting dependencies. I used npm 7.15.1.

yarn install worked.

Errors after upgrading to Angular 8

Upgraded to Angular 8 (8.2.0), and getting following errors. Rxjs and rxjs-compat versions are 6.0.0, and ngrx/store version is 8.2.0. Please, help.

I also tried with rxjs 6.4.0, but that gives a few more errors for rxjs alongwith these erros.
I tried different solutions suggested for previous versions of Angular with no success, but didn't find any help for 8.

node_modules/@angular/compiler/src/ml_parser/ast.d.ts(17,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(18,68): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(27,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(28,152): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(45,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(46,123): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(56,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/ml_parser/ast.d.ts(57,187): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(25,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(26,65): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(34,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(35,123): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(46,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(47,194): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(73,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(74,268): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(89,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(90,345): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(97,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(98,100): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(125,12): error TS1110: Type expected.
node_modules/@angular/compiler/src/render3/r3_ast.d.ts(130,44): error TS1110: Type expected.
node_modules/@angular/core/core.d.ts(12341,86): error TS1110: Type expected.
node_modules/@angular/core/core.d.ts(12341,92): error TS1005: '=' expected.
node_modules/@angular/core/core.d.ts(12341,94): error TS1005: ')' expected.
node_modules/@angular/core/core.d.ts(12341,95): error TS1128: Declaration or statement expected.
node_modules/@angular/core/core.d.ts(12341,96): error TS1128: Declaration or statement expected.
node_modules/@ngrx/effects/src/actions.d.ts(7,103): error TS1005: ';' expected.
node_modules/@ngrx/effects/src/actions.d.ts(7,150): error TS1005: '(' expected.
node_modules/@ngrx/effects/src/actions.d.ts(32,106): error TS1005: '>' expected.
node_modules/@ngrx/effects/src/actions.d.ts(32,158): error TS1005: ')' expected.
node_modules/@ngrx/effects/src/actions.d.ts(32,162): error TS1005: ';' expected.
node_modules/@ngrx/effects/src/actions.d.ts(32,163): error TS1128: Declaration or statement expected.
node_modules/@ngrx/effects/src/actions.d.ts(32,187): error TS1005: '(' expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(4,34): error TS1005: ';' expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(5,21): error TS1005: ';' expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(6,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(7,42): error TS1005: ';' expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(7,78): error TS1005: '(' expected.
node_modules/@ngrx/effects/src/effect_creator.d.ts(7,98): error TS1005: '(' expected.
node_modules/@ngrx/store/src/models.d.ts(7,39): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,67): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,76): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(7,79): error TS1109: Expression expected.
node_modules/@ngrx/store/src/models.d.ts(7,95): error TS1005: '(' expected.
node_modules/@ngrx/store/src/models.d.ts(8,12): error TS1005: ',' expected.
node_modules/@ngrx/store/src/models.d.ts(9,3): error TS1005: ',' expected.
node_modules/@ngrx/store/src/models.d.ts(9,10): error TS1005: ')' expected.
node_modules/@ngrx/store/src/models.d.ts(35,49): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(37,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(43,85): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(45,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(45,64): error TS1005: '(' expected.
node_modules/@ngrx/store/src/models.d.ts(46,59): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(48,3): error TS1128: Declaration or statement expected.
node_modules/@ngrx/store/src/models.d.ts(57,43): error TS1005: ';' expected.
node_modules/@ngrx/store/src/models.d.ts(57,67): error TS1005: '=' expected.
node_modules/@ngrx/store/src/tokens.d.ts(19,83): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(19,126): error TS1109: Expression expected.
node_modules/@ngrx/store/src/tokens.d.ts(23,69): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(23,112): error TS1109: Expression expected.
node_modules/@ngrx/store/src/tokens.d.ts(28,79): error TS1005: '>' expected.
node_modules/@ngrx/store/src/tokens.d.ts(28,120): error TS1109: Expression expected.

On delete, check current product id matches deleted product

In product.reducer.ts on ProductActions.deleteProductSuccess (line 143) the currentProductId is set to null. Given the user can still interact with the app before the delete is successful or fails, it might be best to check the currentProductId matches the deleted product before setting the currentProductId to null. Left as is, the experience can be a bit jarring. I appreciate in a more "real world" example it might best to stop user interaction and wait for response which falls outside the scope of these lessons.

I would raise a PR but I'm not sure what the etiquette is for such things. Apologies if there is a preferred forum to raise this.

Great tutorial on Pluralsight - thank you!

Not able to send you a comment on your blog:https://blogs.msmvps.com/deborahk/angular-ngrx-getting-started-problem-solver/

Error: You have entered an incorrect reCAPTCHA value.
Click the BACK button on your browser and try again.

my comment:
Hi Deborah,

Angular is not complete without NgRx.
Without saying the Angular Team (see ngconf 2018) is pushing NgRx.

I am very happy that you publish your intention on the 23. April which is my birthday.
I am sure you will create a very carefully crafted course!

Good luck
Hans

How to bring product-edit on Modal

Hi Deborah/Duncan. I have a small question and I need your help.

I want to open the product-edit.component in a modal instead of opening next to the list.

In a few steps, how could I do this since the shell.component contains the list of products and the edit form?

I tried to use NgbModel but I believe I'm doing something wrong.

After installing npm the project is not running and getting the error

[error] TypeError: readConfiguration is not a function
at readTsconfig (/Volumes/work/code/practice/APM/node_modules/@angular-devkit/build-angular/src/utils/read-tsconfig.js:49:26)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async configureI18nBuild (/Volumes/work/code/practice/APM/node_modules/@angular-devkit/build-angular/src/utils/i18n-options.js:125:22)
at async generateI18nBrowserWebpackConfigFromContext (/Volumes/work/code/practice/APM/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:71:36)
at async setup (/Volumes/work/code/practice/APM/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:135:47)

Angular 9

I can see that the last commit was to update to Angular 8. Are there any plans to update to Angular 9? And are the changes significant? Anything to be aware of when using NgRx in Angular 9, when watching this course?

Add @ngrx/entities and @ngrx/schematics

#Since you are known as business application developer, I would suggest you add ngrx/entities.
Your course will add true and long lasting values if you add the CRUD support with the help of entities.

When using NgRx you have to write very much boilerplate code (see action creators). To avoid the fatigue of writing this boilerplate, I would suggest that you introduce ngrx/schematics to avoid to manually write this boilerplate!

Remove references to 'cycles' in redux module when discussing what not to put in the store.

In module The Redux Pattern - The Store at time point 1:10, the phrase '... state that has cycles in it' is confusing and should be removed. I think it is a reference to not store cyclic data structures/

Suggestion for a product list with server-side sorting, paging and search

This is not issue ;-).
Thank you for a great course.
I would love to see data flow (effects, reducer) for a product list with server-side sorting, paging and search.

ngrx/store not getting installed

@DeborahK
Using Mac 10.14 and Node LTS but not able to install ngrx/store.
Gettng the below errors in screenshot.
https://asifrepo1-legendary-acorn-4wwqxpp5grx3j4rg.github.dev
Please refer to the repo if you would like to help people who want to learn NgRX using your course.
Deleted Node Modules and Package-lock.JSON still the same issue

why ProductEditComponent does not have OnPush ?

looks like ProductEditComponent is a presentational component as it only has the Input and Output Decorator to talk to parent component and it does not have any NgRx related code which is very pure component.

Can you please convert to the use of action, reducer and effect creaters

Hello,

I have build my own playground app based on your demos.
I converted my source to use createaction and createreducer functions,
but with createeffect I got stuck.

Can you please add a additional source (like APM-Demo6) where the new creators are used.
This will help me a lot.

best regards
Stephan