angular-university / ngrx-course-v4

Contains the NgRx Store and Reactive Extensions Course

This course is now archived, and has been replaced by NgRx (with Ngrx Data) - The Complete Guide

Repository contents

This repository contains the full application of the Angular Ngrx Reactive Extensions Architecture Course.

This course repository is updated to Angular v5, there is a Yarn lock file available.

Installation pre-requisites

For running this project we need node and npm installed on our machine. These are some tutorials to install node in different operating systems:

Its important to install the latest version of Node

• Install Node and NPM on Windows
• Install Node and NPM on Linux
• Install Node and NPM on Mac

Data For the In-Memory Database

The data used in the backend can be found on this file db-data.ts.

Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

npm install -g @angular/cli

How To install this repository

We can install the master branch using the following commands:

git clone https://github.com/angular-university/ngrx-course.git
cd ngrx-course

If you prefer the Yarn package manager, instead of npm install you can also run:

yarn

Although npm install would also work, its recommended to use Yarn to install the course dependencies. Yarn has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

If you start the repository at this stage, you might run into this temporary CLI issue. To solve it, simply edit any Typescript file, and hit space and the problem will be fixed.

But in general its better not to take the course using the master repository, but instead to switch to the several branches as presented in the lessons.

To Run the Chat Application Backend Server

We can start the chat backend server with the following command:

npm run api-server

This will start a server on localhost port 8090.

To Run the Chat Application Frontend Server

We can start the chat application with the following command:

npm start 

The application is visible at port 4200 - http://localhost:4200

Installing branches other than master

At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:

git branch -a

The remote branches have their starting in origin, such as for example start-with-ngrx-store-now.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

  git checkout -b start-with-ngrx-store-now origin/start-with-ngrx-store-now

RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

RxJs and Reactive Patterns Angular Architecture Course

Angular 2 and Firebase - Build a Web Application Course

If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:

Angular 2 and Firebase - Build a Web Application

Github repo for this course

Complete Typescript 2 Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

https://angular-university.io/course/typescript-2-tutorial

Github repo for this course

ngrx-course-v4's Issues

Duplicate message shown temporarily while receiving an unread message.

How to reproduce:

1. Send message '123' from Alice to Bob,

2. Switch user from Alice to Bob,

3. Click unread thread highlighted in red.

The duplicate message is only saved on the frontend as it will disappear after reloading the user's data by switching to another user and back.

Test browser:
Chrome 60

server data show with empty result

I used this url http://localhost:8090/api/threads .
it shows {"participants":[],"messages":[],"threads":[]}

again I tried http://localhost:8090/api/threads/1
then it shows Cannot GET /api/threads/1

when after clone the project and try to npm run api-server it shows compile time errors

Argument of type 'string | string[]' is not assignable to parameter of type 'string'.

errors are in all the .ts files in server/api

every participantId places it shows errors. I fixed them by using
const participantId = parseInt(req.headers['userid'] as string); to all the places

but data not retrieving when call to api/threads or api/threads/1
please help me.

Lodash problem

after running npm start I have list of errors related to lodash:

...
webpack: bundle is now VALID.
[default] Checking started in a separate process...
[default] /Users/aleksandar/projects/ngrx-course/node_modules/@types/lodash/index.d.ts:244:13
    Duplicate identifier '_'.
[default] /Users/aleksandar/projects/ngrx-course/node_modules/@types/lodash/index.d.ts:244:16
    Cannot find namespace '_'.
[default] /Users/aleksandar/projects/ngrx-course/node_modules/@types/lodash/index.d.ts:246:25
    Cannot find name 'Partial'.
...

Server return empty data

Hi All
i purchased your course and follow the tutorial
Finally i get the server up and run at port : 8090
hit web browser with url : http://localhost:8090/api/threads .
---> {
participants: [ ],
messages: [ ],
threads: [ ]
}
what the heck?
read through your findDbThreadsPerUser.ts . --> it need to be passed with the participantId which is not in this case since we try to get all data for the app in the first time loading.
so what is your main ideal behind the scene?
Please advice me
Tommy

Failed to compile

Hi guys,

I have just downloaded and run npm install but the application is failing to load with the following error:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exp
orted function (position 12:42 in the original .ts file), resolving symbol compose in C:/Projects/samples/ngrx-course/node_modules/@ngrx/core/compose.d.ts, resolving
 symbol AppModule in C:/Projects/samples/ngrx-course/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/samples/ngrx-course/src/app/app.module.ts, reso
lving symbol AppModule in C:/Projects/samples/ngrx-course/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/samples/ngrx-course/src/app/app.module.ts,
 resolving symbol AppModule in C:/Projects/samples/ngrx-course/src/app/app.module.ts

Webpack Compilation Error - Function calls are not supported

I've tried uninstalling/reinstalling ngrx/core and angularfire2 without success.

ERROR in Error encountered resolving symbol values statically. Function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function (position 12:42 in the original .ts file),
resolving symbol compose in C:/Users/Jack/Documents/ang2/ngrx-course-master/node_modules/@ngrx/core/compose.d.ts,
resolving symbol reducer in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/reducer.ts,
resolving symbol reducer in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/reducer.ts,
resolving symbol reducer in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/reducer.ts,
resolving symbol AppModule in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/app.module.ts,
resolving symbol AppModule in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/app.module.ts,
resolving symbol AppModule in C:/Users/Jack/Documents/ang2/ngrx-course-master/src/app/app.module.ts
webpack: Failed to compile.

angular/cli: 1.0.0
node: 8.0.0
os: win32 x64
angular/common: 4.2.4
angular/compiler: 4.2.4
angular/core: 4.2.4
angular/forms: 4.2.4
angular/http: 4.2.4
angular/platform-browser: 4.2.4
angular/platform-browser-dynamic: 4.2.4
angular/router: 4.2.4
angular/cli: 1.0.0
angular/compiler-cli: 4.2.4

app not working

running the lates version (master)
yield the folling error :

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 12:42 in the original .ts file), resolving symbol compose in D:/vasco/ngrx-c
ourse/node_modules/@ngrx/core/compose.d.ts, resolving symbol AppModule in D:/vasco/ngrx-course/src/app/app.module.ts, resolving symbol AppModule in D:/vasco/ngrx-course/src/app/app.module.ts, resolving symbol AppModule in D:/vasco/ngrx-course/src/app/app.module.ts,
resolving symbol AppModule in D:/vasco/ngrx-course/src/app/app.module.ts, resolving symbol AppModule in D:/vasco/ngrx-course/src/app/app.module.ts

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\vasco\ngrx-course\node_modules\typescript\lib\typescript.js:9514:20)
at Object.createCompilerHost (D:\vasco\ngrx-course\node_modules\typescript\lib\typescript.js:63770:26)
at Object.ngcLoader (D:\vasco\ngrx-course\node_modules@ngtools\webpack\src\loader.js:338:33)
@ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\vasco\ngrx-course\node_modules\typescript\lib\typescript.js:9514:20)
at Object.createCompilerHost (D:\vasco\ngrx-course\node_modules\typescript\lib\typescript.js:63770:26)
at Object.ngcLoader (D:\vasco\ngrx-course\node_modules@ngtools\webpack\src\loader.js:338:33)
@ multi ./src/polyfills.ts
webpack: Failed to compile.

HMR support

Everything looks fine but it could be really worthwhile to add one more lesson with hmr support setup. Do you have any plan about that? :)

Error with ng start

Hi.

I have an error when I launch the "npm start" instruction.
I maybe tried it at a bad moment ?

This is the error's output:

npm start

[email protected] start C:\Data\dev\tests\Angular_and_ngrx\ngrx-course
ng serve --proxy-config proxy.conf.json

Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in
devDependencies, then delete node_modules and package-lock.json (if you have one) and
run npm install again.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ng serve --proxy-config proxy.conf.json
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'ng serve --proxy-config proxy.conf.json'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ngrx-course package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng serve --proxy-config proxy.conf.json
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ngrx-course
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ngrx-course
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Data\dev\tests\Angular_and_ngrx\ngrx-course\npm-debug.log

The log file is attached to the issue.

npm-debug.log

Regards

Data models

Hello Vasco,

Listen, I was going through your course, and I have a mental block on dealing with the REST API itself.

The separation between the most basic data model and the model-view pattern of sorts is causing me to get confused since this is the first time I've seen anyone used it under Angular.

Do you have any resource where I could ready about this pattern design? In my side project I always go for the aggregated model type of approach(not sticking to IDs).

Thanks.

Angular 5

I found a lot of bugs of this projet with angular 5, plz to fixe them

API serve is not running.

When, I am using command npm run api-server it's running on http://localhost:8090/ but it's shown an error. Error shown in image... Please guide me.

Fail to compile

Argument of type 'string | string[]' is not assignable to parameter of type 'string'