onehungrymind / angular-reactive-workshop Goto Github PK

View Code? Open in Web Editor NEW

87.0 5.0 157.0 1.39 MB

Code for the "Reactive Angular with NgRx" Course on Frontend Masters

Home Page: https://frontendmasters.com/courses/angular-reactive/

CSS 11.11% JavaScript 8.61% TypeScript 72.83% HTML 7.46%

angular-reactive-workshop's Introduction

Angular Reactive Workshop

For this workshop, we are going to build Redux state around the projects feature with NGRX.

The Stack

NRWL Workspace

A NRWL workspace contains one or all of you Angular projects and libraries. It creates a monorepo for your applications domains. Nx helps add extra layer of tooling that can help manage your enterprise applications.

Angular Material

Angular Material is a UI library for Angular that gives you access to a modern material UI that works across web, mobile, and desktop applications with minimal custom CSS and setup.

JSON Server

Creates a quick and simple way to mock out a backend REST service. We can then deliver some mocked out data in JSON format to make sure everything is working as expected once our real backend is connected.

Getting Started

npm install
npm start

This will both boot up a data server on localhost:3000 and serve the frontend on localhost:4200.

angular-reactive-workshop's People

Stargazers

Watchers

Forkers

andy-dev pstjean ukarthik nikhilkuyya-workshop-fork-for-learning adibro500 vicav99 christake alfredoperez rayner-villalba-coderoad-com johntenezaca7 correasebastian eelayoubi darkwinngduck maurofokker jansystemic arupbg cpryor24 rmcveigh hladysh jayamanigit joshuacolvin arunselvakumar bajpaigaurav woontsoudev alekseynilh bistaff rickykiet83 mgott yory100 otoukebri ayox evandertino alexmanoliu svlugovoy eibay kri7217 thrilom lmveloso umar-muneer ah-med gregorsondermeier csdev19 anaknickerbocker mackenmd rpcalderon hadt0786 squaloit lukasz2521 lcpautotester jauschalley bgopikrishna yurii-zhyhailo kamilsobieraj aaronas2016 lexycole luisgvv infine8 devsaad92 apalavra1 elesgergo ethanblumenthal aslanshemilov mellatikhelfia milleroz krdior gzvz-forks hamzajorfaoui sandeep206 raketeflo jebarsoba janakaedirisinghe ackuser mzibouh harkindey andreifloricel blackfire7 rajivkr snehalp29 darrenvisakfdb kcrystalchen olivercomia ilyadusoleil josephwheaton kingringc rippleytrigger ch4n8ru shiv11x10 rogen-code iromashko tulski carolakeskyla robesansan 1456118242 blysca kal93 akilah-littlejohn moshecohenpur itsbritt mjakmiyo leraal

angular-reactive-workshop's Issues

ERROR TypeError: Cannot read property 'map' of undefined when using selectors

ERROR TypeError: Cannot read property 'map' of undefined
    at entity.js:29
    at store.js:609
    at memoized (store.js:551)

At step five in projects.compoment.ts below throws an error

this.projects$ = store.pipe(select(selectAllProjects));

Can also be reproduced by checking out branch 05-basic-selectors.

difficulty running start branch

On start branch, unable start app, getting
1] Module build failed (from C:/.../Desktop/angular-reactive-workshop/node_modules/sass-loader/lib/loader.js): [1] Error: Cannot find module 'node-sass'

Uncaught ReferenceError "Cannot access 'reducers' before initialization"

Hey, I coded along the tutorial and then set up my own Repo where I try to recap everything , again following along the video.

I then started my repo using npx create-nx-workspace --preset angular, rebuilding Lukas' repo structure. However, after importing StateModule to CoreDataModule and importing CoreDataModule to AppModule I got the error mentioned above. You can find the entire code here: https://gitlab.com/hannesFinatix/todo-app/-/tree/state-feature

Any idea where to properly initialize reducers?

Cannot run this on latest node version.

Just thought I'd let you know that I ran into the following issue running this on the latest version of node 18.16.0. Downgrading to v12.0.0 fixed the issue I also let FEM know so they can add a note or something to the course if necessary. Thanks for the awesome courses by the way. :)

npm run start

> [email protected] start
> concurrently "npm run server" "ng serve"

[0] 
[0] > [email protected] server
[0] > json-server server/db.json
[0]
[0] 
[0]   \{^_^}/ hi!
[0]
[0]   Loading server/db.json
[0]   Done
[0] 
[0]   Resources
[0]   http://localhost:3000/customers
[0]   http://localhost:3000/projects
[0]
[0]   Home
[0]   http://localhost:3000
[0]
[0]   Type s + enter at any time to create a snapshot of the database
[1] Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[1] i ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
[1] i ｢wds｣: webpack output is served from /
[1] i ｢wds｣: 404s will fallback to //index.html
[1] node:internal/crypto/hash:71
[1]   this[kHandle] = new _Hash(algorithm, xofLen);
[1]                   ^
[1]
[1] Error: error:0308010C:digital envelope routines::unsupported
[1]     at new Hash (node:internal/crypto/hash:71:19)
[1]     at Object.createHash (node:crypto:133:10)
[1]     at module.exports (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\util\createHash.js:135:53)
[1]     at NormalModule._initBuildHash (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\NormalModule.js:412:16)
[1]     at C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\NormalModule.js:444:10
[1]     at C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\NormalModule.js:320:13
[1]     at C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\loader-runner\lib\LoaderRunner.js:367:11
[1]     at C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\loader-runner\lib\LoaderRunner.js:203:19
[1]     at VirtualFileSystemDecorator.readFile (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:46:13)
[1]     at processResource (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\loader-runner\lib\LoaderRunner.js:202:11)
[1]     at iteratePitchingLoaders (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\loader-runner\lib\LoaderRunner.js:158:10)
[1]     at runLoaders (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
[1]     at NormalModule.doBuild (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\NormalModule.js:292:3)
[1]     at NormalModule.build (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\NormalModule.js:438:15)
[1]     at Compilation.buildModule (C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\Compilation.js:702:10)
[1]     at C:\Users\EdSouthgate\source\repos\angular-reactive-workshop\node_modules\webpack\lib\Compilation.js:944:14 {
[1]   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
[1]   library: 'digital envelope routines',
[1]   reason: 'unsupported',
[1]   code: 'ERR_OSSL_EVP_UNSUPPORTED'
[1] }
[1]
[1] Node.js v18.16.0
[1] ng serve exited with code 1

TypeError: StoreModule.forRoot() called twice

Code in 'start' branch has a bug.
CoreDataModule is in app.module.ts and projects.module.ts.
As a result there is an error in console and page http://localhost:4200/projects can not be opened.

ofType is not defined

ERROR in libs/core-data/src/lib/state/projects/projects.effects.ts(25,37): error TS2339: Property 'ofType' does not exist on type 'Actions<Action>'.

when attempting to execute "npm start"

NullInjectorError: No provider for Store!

I was following the Reactive workshop steps. After completing the 1 step, while running I got the error No provider for Store in my component.
Later realized the store StateModule needs to be injected in the app module.
This might help someone in the future.