deborahk / angular-ngrx-gettingstarted Goto Github PK
View Code? Open in Web Editor NEWMaterials for our Pluralsight course: Angular NgRx: Getting Started: http://bit.ly/AngularNgRx.
License: MIT License
Materials for our Pluralsight course: Angular NgRx: Getting Started: http://bit.ly/AngularNgRx.
License: MIT License
[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)
(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.
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'.
#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!
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
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.
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
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
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.
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!
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!
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.
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?
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.
Add a note to the readme.
@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
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/
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
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?
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.