angular-university/reactive-angular-course

How to build Angular applications in Reactive style using plain RxJs - Patterns and Lightweight state management

The Reactive Angular Course

This repository contains the code of the Reactive Angular Course.

This course repository is updated to Angular v18.

Installation pre-requisites

Please use Node 18 long-term support (LTS) version.

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/reactive-angular-course.git

This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:

cd reactive-angular-course
npm install

Its also possible to install the modules as usual using npm:

npm install 

NPM 5 or above 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.

To Run the Development Backend Server

In order to be able to provide realistic examples, we will need in our playground a small REST API backend server. We can start the sample application backend with the following command:

npm run server

This is a small Node REST API server.

To run the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

npm start 

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

Important

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

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 1-navigation-and-containers.

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 section-1 origin/1-navigation-and-containers

It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.

Other Courses

Modern Angular With Signals

If you are looking for the Modern Angular With Signals Course, the repo with the full code can be found here:

NgRx (with NgRx Data) - The Complete Guide

If you are looking for the Ngrx (with NgRx Data) - The Complete Guide, the repo with the full code can be found here:

Angular Core Deep Dive Course

If you are looking for the Angular Core Deep Dive Course, the repo with the full code can be found here:

RxJs In Practice

If you are looking for the RxJs In Practice, the repo with the full code can be found here:

NestJs In Practice (with MongoDB)

If you are looking for the NestJs In Practice Course, the repo with the full code can be found here:

Angular Testing Course

If you are looking for the Angular Testing Course, the repo with the full code can be found here:

Serverless Angular with Firebase Course

If you are looking for the Serverless Angular with Firebase Course, the repo with the full code can be found here:

Angular Universal Course

If you are looking for the Angular Universal Course, the repo with the full code can be found here:

Angular PWA Course

If you are looking for the Angular PWA Course, the repo with the full code can be found here:

Angular Security Masterclass

If you are looking for the Angular Security Masterclass, the repo with the full code can be found here:

Angular Security Masterclass.

Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

Angular Advanced Library Laboratory Course: Build Your Own Library.

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

Complete Typescript 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

reactive-angular-course's Issues

Error in running npm run server on windows

I came across this issue while running this project. I am running on windows and have all the latest dependencies, still I am facing this issue, however on mac it is working fine. Can anyone please help me with that?

$ npm run server

[email protected] server
./node_modules/.bin/ts-node -P ./server/server.tsconfig.json ./server/server.ts

'.' is not recognized as an internal or external command,
operable program or batch file.

Can anyone please help me. I am stucked herer.

Wrong data types in courses service

On

reactive-angular-course/src/app/services/courses.service.ts

Line 39 in 8fd3888

return this.http.get<Course[]>("/api/courses")

it should be

this.http.get<{payload: Course[]}>

so you need to to do additional casting with

reactive-angular-course/src/app/services/courses.service.ts

Line 41 in 8fd3888

map(res => res["payload"]),

as TypeScript would already know the type of the payload, so you can do

map(res => res.payload)

and it would already have the correct type.

Same goes for all the other HTTP requests.

fix: Cant create new component with CLI because angular.json configuration.

Project in angujar.json folder is named "angular-material-course", also there is another project entry called "angular-material-course-e2e", because of that, new components cannot be created with CLI.
Projects in angular.json file needs to be configured.

search-lessons.route.ts

WebStorm has detected errors in search-lessons.route.ts file and unable to run "npm run server" because of this. Appreciate if you please advise how to resolve following errors:

Error:(13, 27) TS2345: Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'.
Type 'ParsedQs' is not assignable to type 'string'.
Error:(14, 25) TS2345: Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'.
Type 'ParsedQs' is not assignable to type 'string'.
Error:(19, 55) TS2367: This condition will always return 'false' since the types 'number' and 'string | ParsedQs | string[] | ParsedQs[]' have no overlap.
Error:(25, 94) TS2339: Property 'toLowerCase' does not exist on type 'string | ParsedQs | string[] | ParsedQs[]'.
Property 'toLowerCase' does not exist on type 'string[]'.
Information:Cannot find parent 'tsconfig.json'

Regards

Having couple of module errors and not sure what is leading there

Courses card List - has issue with the emit method

tap(()=>this.coursesChanged.emit())).subscribe(); -> not compiling and angular crashes with this error
ERROR in ./node_modules/blocking-proxy/built/lib/client.js 7:12-26

Module not found: Error: Can't resolve 'url' in '/Users/venkateshmuddu/development/ontologyx-dev/angular-university/reactive-angular-course/node_modules/blocking-proxy/built/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }

ERROR in ./node_modules/blocking-proxy/built/lib/simple_webdriver_client.js 6:13-28

Module not found: Error: Can't resolve 'http' in '/Users/venkateshmuddu/development/ontologyx-dev/angular-university/reactive-angular-course/node_modules/blocking-proxy/built/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }

ERROR in ./node_modules/blocking-proxy/built/lib/simple_webdriver_client.js 7:12-26

Module not found: Error: Can't resolve 'url' in '/Users/venkateshmuddu/development/ontologyx-dev/angular-university/reactive-angular-course/node_modules/blocking-proxy/built/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }

ERROR in ./node_modules/blocking-proxy/built/lib/webdriver_logger.js 6:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/venkateshmuddu/development/ontologyx-dev/angular-university/reactive-angular-course/node_modules/blocking-proxy/built/lib'

ERROR in ./node_modules/blocking-proxy/built/lib/webdriver_logger.js 7:13-28

Module not found: Error: Can't resolve 'path' in '/Users/venkateshmuddu/development/ontologyx-dev/angular-university/reactive-angular-course/node_modules/blocking-proxy/built/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }

getting error while npm start

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:56652/api/courses to http://localhost:9000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

give me that error how to fix it

Object literal may only specify known properties, and 'entryComponents' does not exist in type 'NgModule'.

On the 1-start branch I get the following error when running 'npm start' for the very first time (Master branch compiles alright):

Error: src/app/app.module.ts:79:3 - error TS2345: Argument of type '{ declarations: (typeof CourseDialogComponent | typeof HomeComponent | typeof CourseComponent | typeof LoginComponent | typeof LessonComponent | typeof SafeUrlPipe)[]; imports: (typeof BrowserModule | typeof AppRoutingModule)[]; providers: undefined[]; bootstrap: (typeof AppComponent)[]; entryComponents: (typeof Cou...' is not assignable to parameter of type 'NgModule'.
Object literal may only specify known properties, and 'entryComponents' does not exist in type 'NgModule'.

79 entryComponents: [CourseDialogComponent]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 This seems to resolve itself when you comment out line 79 from app.module.ts

npm run server

C:\Users\home>cd 3-services

C:\Users\home\3-services>cd 3-services

the npm run server command is not working
C:\Users\home\3-services\3-services>npm run server

[email protected] server
./node_modules/.bin/ts-node -P ./server.tsconfig.json ./server.ts

'.' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\home\3-services\3-services>

ExpressionChangedAfterItHasBeenCheckedError

I was following your course and I faced a problem. When creating loading component using completely reactive pattern, I get the "ExpressionChangedAfterItHasBeenCheckedError" error. I have reproduced the error in here.

I think it's an angular bug. What do you think?

npm WARN When running npm install or npm update

Hi Geeks,

When I am trying to run npm install in the cloned repo showing the below warning

npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '[email protected]', npm WARN EBADENGINE required: { node: '0.10 || 0.12 || 4 || 5 || 6' }, npm WARN EBADENGINE current: { node: 'v16.17.0', npm: '8.19.2' } npm WARN EBADENGINE }

What to do Next ??

problem running "npm run server"

I have just started the course, and when I try to run the command "npm run server", I get the following error...

D:\Ian\Documents\coding\angular\reactive-angular-course>npm run server

[email protected] server D:\Ian\Documents\coding\angular\reactive-angular-course
ts-node -P ./server/server.tsconfig.json ./server/server.ts

D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:307
throw new TSError(formatDiagnostics(diagnosticList, cwd, ts, lineOffset))
^
TSError: ⨯ Unable to compile TypeScript
server\search-lessons.route.ts (17,33): Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'.
Type 'ParsedQs' is not assignable to type 'string'. (2345)
server\search-lessons.route.ts (18,31): Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'.
Type 'ParsedQs' is not assignable to type 'string'. (2345)
server\search-lessons.route.ts (23,59): This condition will always return 'false' since the types 'number' and 'string | ParsedQs | string[] | ParsedQs[]' have no overlap. (2367)
server\search-lessons.route.ts (30,97): Property 'toLowerCase' does not exist on type 'string | ParsedQs | string[] | ParsedQs[]'.
Property 'toLowerCase' does not exist on type 'string[]'. (2339)
at getOutput (D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:307:15)
at D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:336:16
at Object.compile (D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:496:11)
at Module.m._compile (D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:392:43)
at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Object.require.extensions.(anonymous function) [as .ts] (D:\Ian\Documents\coding\angular\reactive-angular-course\node_modules\ts-node\src\index.ts:395:12)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)

npm ERR! Windows_NT 10.0.19041
npm ERR! argv "D:\Program Files\nodejs\node.exe" "C:\Users\Ian\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "server"
npm ERR! node v10.16.0
npm ERR! npm v4.0.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] server: ts-node -P ./server/server.tsconfig.json ./server/server.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server script 'ts-node -P ./server/server.tsconfig.json ./server/server.ts'.
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 reactive-angular-course package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ts-node -P ./server/server.tsconfig.json ./server/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs reactive-angular-course
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls reactive-angular-course
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Ian\Documents\coding\angular\reactive-angular-course\npm-debug.log