By Developers, For Developers

Historical errata for Build Reactive Websites with RxJS

PDF PgPaper PgTypeDescriptionFixed onComments
iiiTYPO

Typo in chapter name ‘3. Managing Asyncronous Events’ - should be Asynchronous

2018-10-17
ixTYPO

Missing H in asynchronous - ‘skip ahead to Managing Asyncronous Events, though’

More (a)synchronous typos on pages:

- 2 (last paragraph - ‘like promises in that they’re asyncronous:’

- 7 (beginning of second paragraph - ‘This example only works with syncronous arrays’)

- 7 (middle of second paragraph) ‘that the modification in map is syncronous.’)

- 10 (end of second paragraph) ‘Additionally, since mousemove events
are fired syncronously’

- 12 (link in second paragraph) ‘in detail in Managing Asyncronous Events.’

- 13 (last line) ‘to create a finite, asyncronous stream.’

- 26 (first line) ‘talking about asyncronous requests yet’

- 29 (chapter name) ‘Managing Asyncronous Events’ (also visible in top right on each page of this chapter)

- 29 (middle of second paragraph) ‘You’ll dive into asyncronous programming’

- 34 (middle of second paragraph) ‘Common pre-observable asyncronous patterns only’

- 47 (link in second paragraph) ‘you learned in Managing Asyncronous Events:’
- 48 (link at the end of second paragraph) ‘operator you learned about in Managing Asyncronous Events.’

The same typo (missing H) is also present in contents on the book page (pragprog.com/book/rkrxjs/build-reactive-websites-with-rxjs) ‘Managing Asyncronous Events’

2018-10-17
9ERROR

As the example stands, there is a bug in the stopwatch, which I happened to discover with my second click in the application. If you click the Start button more than once, you end up with multiple subscriptions in a race condition fighting to update the display so it flickers back and forth, until you end them all by clicking the Stop button. I found that it is easy enough to fix this by changing the takeUntil() call to shut down the current thread when either button is clicked, like so: .takeUntil(Rx.Observable.merge(stopClick$, startClick$))

2018-10-17
10ERROR

My erratum in b1.0 is still an issue in b2.0, but the fix is now more complex…

As the example stands, there is a bug in the stopwatch, which I happened to discover with my second click in the application. If you click the Start button more than once, you end up with multiple subscriptions in a race condition fighting to update the display so it flickers back and forth, until you end them all by clicking the Stop button. I found that it is easy enough to fix this by changing the first import statement to `import { interval, fromEvent, merge as mergeStatic } from ‘rxjs’;`and then changing the takeUntil() call to shut down the current thread when either button is clicked, like so: `takeUntil(mergeStatic(stopClick$, startClick$))`

2018-10-18Thanks for all your recommendations, James. In this particular case, the solution is merging, but the reader hasn't learned about that yet.
8ERROR

Why are we dividing the number by 10? num+>num/10? sn’t 100ms =1/10th of a second?

2018-10-17
9ERROR

Unable to get the code to run: rx-pizza. It is very frustrating when the code simply doesn’t run. It’s one thing not including detailed instructions on how to run the examples, it is another issue altogether when after spending a considerable time trying to get it to run and then discovering issues: Could you please provide some suggestions??

Date: 2018-08-04T20:01:20.219Z
Hash: becbab3b0075db27d2e1
Time: 4032ms
chunk {main} main.js, main.js.map (main) 2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 719 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in src/app/registration-form/registration-form.component.ts(12,54): error TS2304: Cannot find name ‘HttpClient’.

2018-10-17
16ERROR

It looks like the delay code example missed a step in translating to the latest version of RxJs. When I tried running it as shown, it failed with the error that Rx was not known. To fix it, in the end, simply deleting changing“Rx.Observable.merge(” to “merge(” worked, because the merge function had already been imported from its new location in the first line of the example.

2018-10-17
25TYPO

It looks like the console.log statement closest to the top of the page missed being updated to the latest RxJs naming; it logs ‘inside do’ when it should probably log ‘inside tap’?

2018-10-17
27SUGGEST

The caption for the Typeahead screen shot claims the matching states are shown in order of probability, when it seems pretty clear that they are simply in alphabetical order. I’d suggest simply describing them that way.

2018-10-18
31TYPO

In the first paragraph of Chapter 3 “frusterated” should surely be “frustrated”.

2018-10-17
35TYPO

The first paragraph describes the fromPromise constructor thus: “…emits whatever the promise resolves to, completely the observable immediately after.” It seems “completely” should be “completing”?

2018-10-17
35TYPO

There are three places in the Promises callout sample code where “=>” appear, these should be “=>”.

2018-10-17
57TYPO

The whole final paragraph on this page seems to be out of place. It is talking about a displaySpinner function that we have not yet seen, and the paragraph makes no sense after the example we just finished.

2018-10-17
59ERROR

In order to get the setInterval() line to compile, I needed to change the parenthesis grouping to: setInterval(() => o.next(‘hello’), Math.random());

This makes the Math.random() the second argument to setInterval() rather than an argument to o.next(), which makes sense given the setInterval() semantics, although I do think your expressed intent of having the two different observable streams displaying different random numbers would have been a neat illustration.

2018-10-18
68ERROR

The .subscribe() call which is the final line of code on the page seems to have an unnecessary call to JSON.stringify() in it. This wraps the message sent to the server as a string one time too many, and causes node to crash:

GET /api/multiplexingObservables/chat/user/saf 200 2006.836 ms - 149
req.url /api/multiplexingObservables/chat-ws
— init chat room —
/Users/james/Books/build-reactive-rxjs code/vanilla/routes/sockets.js:49
msg.user = msg.user.username;
^

TypeError: Cannot read property ‘username’ of undefined
at WebSocket.ws.on.msg (/Users/james/Books/build-reactive-rxjs code/vanilla/routes/sockets.js:49:25)
at WebSocket.emit (events.js:182:13)
at Receiver.receiverOnMessage (/Users/james/Books/build-reactive-rxjs code/vanilla/node_modules/ws/lib/websocket.js:741:20)
at Receiver.emit (events.js:182:13)
at Receiver.dataMessage (/Users/james/Books/build-reactive-rxjs code/vanilla/node_modules/ws/lib/receiver.js:414:14)
at Receiver.getData (/Users/james/Books/build-reactive-rxjs code/vanilla/node_modules/ws/lib/receiver.js:346:17)
at Receiver.startLoop (/Users/james/Books/build-reactive-rxjs code/vanilla/node_modules/ws/lib/receiver.js:133:22)
at Receiver._write (/Users/james/Books/build-reactive-rxjs code/vanilla/node_modules/ws/lib/receiver.js:69:10)
at doWrite (_stream_writable.js:410:12)
at writeOrBuffer (_stream_writable.js:394:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vanilla@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vanilla@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Changing the line of code in reader.ts to simply chatStream$.next(val); allows the message to send successfully and appear in the chat room history.

As an aside, why is the cast needed? It seems that without it, TypeScript doesn’t believe the room has a name, which confuses me.

2018-10-18
67ERROR

The regular expression used to pull out the room name from the button (middle of the page) doesn’t actually work once there start to be visible unread counts. Here is a version that actually does work:

map(e => e.target.innerText.replace(/\\s*\\d*$/, ’’))

2018-10-18
24TYPO

mergeMapTo(ajax(‘/logout’) is missing a ) at the end of the line

2018-10-17
11xSUGGEST

npm install instructions can be clarified. Should the reader be in the vanilla subdirectory? A different subdirectory? npm install doesn’t work in the top folder. Thanks!

2018-10-17
14TYPO

Seems like “want” in “… data the program needs want isn’t immediately available” shouldn’t be there.

2018-10-17
5SUGGEST

Please clarify what files the reader should be editing and loading in the browser.

In “Running a Timer” we’re told “As you read through each snippet of code, add it to the sandbox.ts file in your code directory.” Later instructions seem to assume we’re working in stopwatch.ts and loading the stopwatch.html file in our browser, but we’re never prompted to edit or load those pages.

If we should use stopwatch.ts, please clearly say so.

If we should pull parts of stopwatch.html into sandbox.html, please let the reader know as well.

Thanks!

2018-10-17
1ERROR

When installing vanilla npm packages, it asks to run the server and go to port 8081. It runs on 8080 in my case.

2018-11-25Updated npm script to ensure the server runs on 8081
6TYPO

There is a “todo: link” for a chapter link

2018-11-24
301TYPO

The localhost port is wrong, please use :8080 instead of :8081

2018-11-24
301ERROR

I already installed the npm packages and run the server.. but the exercises don’t work.

In the console i getting this error
GET localhost:3000/assets/bootstrap.min.css net::ERR_CONNECTION_REFUSED

thanks for your help

2018-11-25You'll need to have both the server for the chapter running as well as the general asset server mentioned in the introduction.
37TYPO

Where it says ‘mosaic.js’ it should say ‘mosaic.ts’

10TYPO

Off-by-one error in the stopwatch example. The line

map(item => (item / 10)),

should read

map(item => ((item + 1) / 10)),

Otherwise the stopwatch will be 100ms off.

1ERROR

Cant use the server!

PS D:\\_current tutorial\\rkrxjs-code\\asset-server> npm -v
6.9.0
PS D:\\_current tutorial\\rkrxjs-code\\asset-server> node -v
v10.15.3
PS D:\\_current tutorial\\rkrxjs-code\\asset-server> npm start

> vanilla@0.0.0 start D:\\_current tutorial\\rkrxjs-code\\asset-server
> DEBUG=vanilla:server node ./bin/www

‘DEBUG’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vanilla@0.0.0 start: `DEBUG=vanilla:server node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vanilla@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\\Users\\Andrew\\AppData\\Roaming\
pm-cache\\_logs\\2019-04-24T20_16_11_495Z-debug.log
PS D:\\_current tutorial\\rkrxjs-code\\asset-server>

2019-12-21
20TYPO

The code snippet:

“
​ \t​let​ keyUp$ = fromEvent(textbox, ​’keyup’​)
​ \t.pipe(
​ \t map(event => event.target.value),
​ \t map(wordString => wordString.split(​/​​\\s​​+/​)),
​ \t map(wordArray => wordArray.map(pigLatinify))
​ \t)
.subscribe(translated => console.log(translated));
”

is missing its type thus typescript can’t compile it as event.target.value on the assumed EventTarget type. The completed version of the code resources has added type to fromEvent thus it compiles.

My suggestion is to fix this in the code example in the book for the next revision even though it is correct in the code resource.

xERROR

asset-server will not start

‘DEBUG’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vanilla@0.0.0 start: `DEBUG=vanilla:server node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vanilla@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\\Users\\krlan\\AppData\\Roaming\
pm-cache\\_logs\\2019-11-25T21_29_23_741Z-debug.log

2019-12-21Hello! This is an error some folks are encountering on Windows systems. Instead of running: \n \nnpm start \n \ninstead run \n \nnode ./bin/www \n \nfrom the same directory.
83TYPO

The last sentence on the page “First, go to app.module.html and add …”, app.module.html should be app.component.html.

29TYPO

The code correctly shows the tap operator just before the filter operator. Yet, at the end of the following first paragraph it refers to the filter operator, and then at the start of the second paragraph it states “Now that the code is certain it has a value worth investigating, a tap operator clears the output element.”

The code is functionally more correct with the assumed intention. The tap operator indeed should come before the filter operator. The instant a key is pressed the input has changed and the prior result is no longer representative, and thus the list should be cleared. If the tap operator is after the filter operator, then the box would only be cleared if a new result was available. If you typed “cal” California would immediately show, but if you backspaced twice and typed an “o”, California would still show even though the input showed “co”.

The paragraphs should be updated to reflect the code, and possibly the reason tap comes first. I initially assumed tap should indeed be after the filter until I realized the issue it would cause and confirmed it when I coded it.

Thanks! Loving the book. :)

48TYPO

In the line “switchMap(query => ajax(endpoint + searchVal))” searchVal does not exists. It should be “switchMap(query => ajax(endpoint + query))”

48-52TYPO

There are slight errors in the several code blocks shown in the book causing the searchbar.ts eample to not work, until the very end if you use the searchbar-complete.ts. Rather than submitting multiple errata for this same section I thought I’d just put one submission.

- The pluck operator does not seem to produce a type that is understood by the filter operator. In the complete.ts this is switched to a map operator.

- In “switchMap(query => ajax(endpoint + searchVal))” searchVal does not exist. Should be “switchMap(query => ajax(endpoint + query))”.

- There is no updatePage function, it should be displayResults.
- displayResults expects results.response, but only results is sent.

Thanks! Keep up the great work!

83ERROR

Google seems to have changed their image output format and the asset-server no longer returns valid image URLs, but it is a successful return none the less so it doesn’t trigger the error block returning the hard-coded cat images.

Even though dynamic Google image searches are fun it might be best to simply return the hard-coded cat URLs. A possible option would be to use the Google Search API as this would at least have some lasting consistency. But that would potentially require a small set of instructions briefing the reader on creating a Google API key and other required steps.

93ERROR

As written the Save button never actually completes the save and the tags are lost when you navigate away from the Edit component. This is because the http Put call is never subscribed to. Either the photos.service.ts savePhoto method must have a subscribe or the edit-photo.component.html needs it.

92TYPO

The tagInput: string property on the component is referred to but never added. While it seems to work (not sure why) TypeScript throws errors that no member exists. It was confusing until I looked at the completed code and found the property on the component.

103TYPO

The HTML shown is not prefixed by a statement that this is to be added to the phone-num.component.html file. Upon initial reading it looks like it might be added to the component class below the phoneNumber property declaration.

--ERROR

How to get Angular work? I have a stroke.

--ERROR

How to get Angular work? I have a stroke.—Kurt Stirnkorb

xERROR

System; x86 architecture, Ubuntu 20 LTS
“npm install” and “npm start” execute without error. When attempting to access the npm server instance on localhost:3000 it errors out (browser and terminal feedback below). I can’t figure out what’s going on.

Browser errors:
Not Found
404
Error: Not Found
at /home/xxx/Documents/code/asset-server/app.js:42:13
at Layer.handle [as handle_request] (/home/xxx/Documents/code/asset-server/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/xxx/Documents/code/asset-server/node_modules/express/lib/router/index.js:317:13)
at /home/xxx/Documents/code/asset-server/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/xxx/Documents/code/asset-server/node_modules/express/lib/router/index.js:335:12)
at next (/home/xxx/Documents/code/asset-server/node_modules/express/lib/router/index.js:275:10)
at SendStream.error (/home/xxx/Documents/code/asset-server/node_modules/express/node_modules/serve-static/index.js:121:7)
at SendStream.emit (events.js:198:13)
at SendStream.error (/home/xxx/Documents/code/asset-server/node_modules/express/node_modules/send/index.js:275:17)
at SendStream.onStatError (/home/xxx/Documents/code/asset-server/node_modules/express/node_modules/send/index.js:426:12)

Terminal Errors:
xxx@xxx:~/Documents/code/asset-server$ npm start

> vanilla@0.0.0 start /home/xxx/Documents/code/asset-server
> DEBUG=vanilla:server node ./bin/www

vanilla:server Listening on port 3000 +0ms
GET / 404 7.685 ms - 1155
GET /favicon.ico 404 0.798 ms - 1155
^C
xxx@xxx:~/Documents/code/asset-server$ node ./bin/www
GET / 404 12.199 ms - 1155
GET / 404 4.341 ms - 1155

Categories: