Please post errors found in the published version of Angular 2 Development with TypeScript here. We'll publish a comprehensive list for everyone's convenience. Thank you!

Susan Harkins
Errata Editor
Manning Publications

In A.7.2 on page 373 while correct syntax it should be "console.log(a1.counter)" and "console.log(a2.counter)"

Table B-7 on page 409 is chopped off before the "array.concat(value1,value2,valu3,....................valuen)" and it's description.

Section 3.8.2 - Listing 3.21 - home.ts

The listing here is missing the following import statement for Product and ProductService:

import { Product, ProductService } from '../../services/product-service';

Without it, the following error is shown:

'Error: (SystemJS) Can't resolve all parameters for HomeComponent: (?)'

This import is included in the latest source code

par 3.8:" '@angular/router' : {main: 'router.umd.min.js'}," should be added to packages in systemjs.config.js. This is not mentioned in the text (and was not required in par 2)..

par 3.8.5, page 106: "The value for prodTitle will be provided in ProductItemComponent, where the routerLink was defined."
Replace "ProductItemComponent" by "ProductDetailComponent"

PollekePiekhaar wrote:par 3.8:" '@angular/router' : {main: 'router.umd.min.js'}," should be added to packages in systemjs.config.js. This is not mentioned in the text (and was not required in par 2)..

par 3.8.5, page 106: "The value for prodTitle will be provided in ProductItemComponent, where the routerLink was defined."
Replace "ProductItemComponent" by "ProductDetailComponent"

Listing 5.9 page 167: replace "import {FilterPipe} from '../pipes/filter-pipe' " with " import {FilterPipe} from '../../pipes/filter-pipe' "

Sorry I can't tell you the page number as Kindle is a bit weird about that, but in Listing 2.2, there is this code comment:

"Inside the constructor, you initialize the name property with the value Angular 2 bound to the template."

But in the code, it is just "Angular", not "Angular 2"

The link on page 163 (http://mng.bz/78lD) appears to be broken. It attempts to resolve to https://angular.io/docs/ts/latest/api/common/index/DatePipe-class.html
but I'm guessing it is supposed to resolve to https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

On page 92 "Note the parentheses in the URL of the auxiliary route, http://localhost:8080/ #home/(chat)" the correct route is " http://localhost:8080/#/home(aux:chat)"

On page 185 in section 6.1.3, the text states '...the main DOM tree, and the styles weren’t encapsulated—the entire window is shown with the parent’s light green background.' However, the light green background is defined on the child component level

First Let me say that this is my third book that I have from Mr. Yakov Fain.
I'm half way through this one and very pleased.


page 55 ...the three the most... extra the

small typo page 95 (middle of the page) RootModule ---- I think should have been RouterModule

page 99 ...will be lazy-loaded and you we didn't... --- I think the we is not needed here

page 175 some code is missing in the printed book (listing 6.3) but it is in the code sample and works

class AppComponent {

stockSymbol: string;
price:number;

priceQuoteHandler(event:IPriceQuote) {
this.stockSymbol = event.stockSymbol;
this.price = event.lastPrice;
}
}

page 181 ..when the value of the buy input property... I think you intended to write ...the stock input property



code: I am using IntelliJ IDEA and working through the code samples ( npm install locale for each chapter)
making sure they all compile in the ide and in the browser I make sure that I use the latest npm files ( add ^ to all in the package.jason and verify in the ide that they are all up to date)


chapter 5 listing 5.6

@Pipe({name: 'temperature'})
export class TemperaturePipe implements PipeTransform {

transform(value: any[], fromTo: string): any {........

it works in the browser but in the IDE I get
Error (14, 20) TS2362:The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.


when changing to

transform(value: number, fromTo: string): any {.....

it is OK




chapter 6
export interface Stock {....

does not work in browser ( even with the Meta in the system.config.js)

this works

export class Stock {
stockSymbol: string;
bidPrice: number;
}

Thanks again for a great book

Listing 8.8, main-asyncpipe.ts, is missing the following import statement:

import 'rxjs/add/operator/map';

This import is however included in the source code. Typing the listing out and running it as is (in the book) results in a runtime error

on page 249 listing 8.6 missing in the package.jason (in dependencies)

"reflect-metadata": "^0.1.8",


it is needed for page 266 listing 8.18

<script src="node_modules/reflect-metadata/Reflect.js"></script>

is it missing in the print and in the code

In appendix A.2 template literals it states:
You can embed expressions inside the literal by placing them between curly braces prefixed with a dollar sign.

But the examples are without dollar sign and don't work.

Listing2.10 is incorrect in PDF and differs from the git version

In Listing 5.4 on page 157 the line "console.log(`The price of stock ${stock} is ${100*Math.random().toFixed(4)}`) should be
console.log(`The price of stock ${stock} is ${(100*Math.random()).toFixed(4)}`)
without the added ()
[ts] The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

per your request from page 268 "...you should perform a detailed code review..."

In the Auction program from chapter 8 selecting 'All categories' in the Product category drop down is not working

in ../chapter8/auction/client/app/components/search/search.html line 39


<option value="-1">All categories</option> ///// this sends localhost:8000/products?category=-1 ---- fails to return any products from the server

to

<option value="">All categories</option> ///// this sends localhost:8000/products -----( no category ) and works


also in ../chapter8/auction/server/model.ts line 34


p => p.categories.indexOf(params.category.toLowerCase()) !== -1);

can just be

p => p.categories.indexOf(params.category.toLowerCase()));




also in ../chapter8/auction/client/app/services/product-service.ts line 28, 30 and 31

export interface ProductSearchParams {
title: string;
minPrice: number;
maxPrice: number;
}


should be


export interface IProductSearchParams {
title: string;
price: number;
category: string;
}



and then in line 40

search(params: IProductSearchParams): Observable<Product[]> {

(it works without the changes but TypeScript likes the interface to start with the capital I)



I’m using TypeScript 2.1.5 , Angular 2.4.5 and Node 6.9.2

Page 11 and Figure 1.4: there is:

class SearchComponent {
  product: Product;
  findProduct(prodToFind.value){
   // Implementation of the
   // click handler goes here
  }
}

but in the listing above:

class SearchComponent {
 @Input() productID: number;
 product: Product; // code of the Product class is omitted
 findProduct(prodName: string){
  // Other code can go here
 }
}

Can I use this prodToFind.value as an argument in the findProduct method definition? Or maybe it is some pseudocode here and not any implicit magic here.

Sorry If this is correct. I'm just a beginner.

page 317 listing 10.6 (book and code)

path: './dist',

not working with webpack 2.2.1 when running the webpack-dev-server

path: '/dist',

works ( no dot )

when running webpack (that actually creates the dist directory) the dot is needed



also, in the book

entry: {
'main': './main'
},

in the download code

entry: './main',

both work other way...

On page 27, the text states, "Notice how in listing 2.2 the entire template is wrapped in backticks to turn the template into a string." However, both the code listing on page 26 and the main.ts file from the downloaded code enclose this template in single quotes. I tested the code both ways and they both work, but since the use of backticks was specifically called out in the text, the listing should probably actually use the backtick character.

On page 47, the text states that live-server was installed "in section 2.4.1." Actually, it was installed in section 2.1.4.

The note the top of page 192 is out of phase with ngOnChanges code on page 191. To get the note in phase change it to:
"TypeScript has a structural type system, so the type of the argument
changes of ngOnChanges() is specified by including an interface that specifies a structure. As an alternative, you could specify a structure inline
{[key: string]: SimpleChange} and the function
signature would look like ngOnChanges(changes: {[key: string]: SimpleChange}). The preceding
declaration of the user property in AppComponent is yet another example of
using the structural type."

Table 7.4 on page 214 has some extraneous texts "2((CO7-2))" and "2((CO7-3))"

Chapter 10, section "Using Webpack Dev Server".
I just upgraded both webpack and webpack-dev-server to 2.2.0, and the output section (specifically ./dist)in webpack.config.js started causing errors when you run webpack-dev-server. Remove the leading dot so it's /dist.

I pushed the new version of hello-world-dev-server to Github:
https://github.com/Farata/angular2typescript

In Appendix A, page 366:

let {sym, price, stockExchange} = getStock();

should be:

let {symbol, price, stockExchange} = getStock();

On page 247 change "(run nodemon build/auction-rest-server.js)" to "(if nodemon is installed globally run 'nodemon build/auction-rest-server.js'; otherwise edit the "dev" script in package.json)

IoT (Internet of Things) should be IoC (Inversion of Control). Freudian slip.

On page 260 it should be "npm run simpleWsServer", not "npm simpleWsServer"

Excellent book. p. 144, line 1. "DOM attribute" should be "DOM property" to be consistent with HTML attributes and DOM properties.

p. 149.

Awesome book. But some errors always slip through. Also I could be wrong.

Towards the end of the page, "one-way binding from a component to the UI is denoted by surrounding an HTML attribute with square brackets". Well, yes, but I thought we were promoting DOM property based bindings.

Page 164 talks about the need to list custom pipes in the @Component annotation's pipes property, however listing 5.7 only seems to list the custom pipe in the @NgModule declarations property.

Listing 8.16:

import {Observable } from 'rxjs/Observable';

export class WebSocketService{

    ws: WebSocket;

    createObservableSocket(url:string):Observable<any>{...}

I purchased the Kindle version and Listings 2.1 and 2.3 reference

unpkg.com/zone.js@0.6.12

After failing to get it working, bit the bullet and downloaded the source and found that it should be referencing

unpkg.com/zone.js@0.6.21

Page 179, line 7.

mediator.ts - PriceQuoterComponent and OrderComponent (WRONG)

mediator.ts - AppComponent (CORRECT)

An errata list can be accessed at https://rawgit.com/farata/angular2typescript/c8fd6fe8dfc97f42371240ec762c1f6555d2aaf0/Errata.html. Thanks!

Susan Harkins
Errata Editor

Page 136, Listing 4.12

"Date.parse(r.timestamp)" should be "new Date(r.timestamp)"
as in the code samples with the chapter.

Chapter 5:
Auction Chap 4 to Auction Chap 5
Missing add to system.config.js:
'@angular/forms' : {main: 'forms.umd.min.js'},

Chapter 3 Auction to Chapter 4 Auction do not include the changes to
Search.ts + Search.html (which causes app to crash for chapter 4 to 5 changes)

Based on code samples included.

Chapter 6
Auction 5 to Auction 6

In app.module.ts

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
Add FormsModule to App imports

(error with textarea [(ngModel)]) if not added.

Good day,

related to your github-page https://github.com/Farata/angular2typescript

at the end of the README.md

"Code samples located in the folders http-node-samples and auction require two separate terminal windows: one for running the Node server and another - to bundle and deploy the client. In the client dir: npm run build. In the server dir: npm run devRestAngular (in auction/server it's npm run startServer). Then open your browser at localhost:8000."

I would suggest to add the information that you need to perform the command "npm run tsc" in the auction/server project to compile the auction.ts, before your can run "npm run startServer". I needed a couple of minutes to figure this out. Thank you for your great book.

Appendix A (ES6) code samples, when read online at safaribooksonline.com, do not show the dollar ($) sign before the curly braces '{}'. Not sure if this happens in other formats as well.

Thank you for reporting this. I'll see what can be done.

Susan Harkins
Errata Editor

Just before Listing 2.13 in the ebook version at safari books online, in chapter 2, the following line does not make sense:

In section 2.3.3, you mapped the name app to main.ts, so let’s create a directory called app containing an app.component.ts file with the following content

Page 53: Last sentence in the first paragraph. I believe package_json s/b package.json.

Page 54: I believe the reference to Listing 2.9 should be Listing 2.16.

Page 179: "To represent the payload of the event emitted by PriceQuoteComponent." I believe this should be PriceQuoterComponent. The same mistake appears in the sentence before Listing 6.5.

Page 198: Section 6.5 refers to the Produce Details view, whereas in Chapter 4, it was called the Product Details view.

Page 290: Listing 9.4 doesn’t appear to use the routes with constant, whereas Listing 9.5 does.

Chapter 5 Hands On Exercise (filtering products):

Sorry if I missed something in earlier chapters (I don't think I did, as I worked through the chapters sequentially), but from what I can see in comparing the completed hands-on code in Chapter 4 that I started with, and which is functional, and then adding the hands-on exercise code in Chapter 5 from that point, it seems that modifications to SearchComponent have been completely omitted between Chapter 4 and Chapter 5 in the printed text. After adding the ReactiveFormsModule to the app.module.ts at the bottom of Pg 167, the SearchComponent blows up due to a missing form modifications that are only in the Chapter 5 solution code. Specifically, I do not see mention of where <form [formGroup]="formModel"> needs to be added to the top of search.html, the SearchComponent typescript code mods that are in the Chapter 5 solution but not in the Chapter 4 code, and also the formControlName references in search.html as well.

Again, apologies if I missed something, but I do not see a printed reference to any modifications to SearchComponent, at least between Chapter 4 and the Chapter 5 hands-on exercise.

Thanks.

Pg 243

For creating the simple web server in section 8.2.1, you have to also include the "@angular/http": "2.0.0" dependency in package.json, or else npm run tsc will complain that module http is not found. It does mention that http is included in @angular/http on Pg 238, it just doesn't mention adding it in the instructions for the simple web server. Also be sure to read the top of Pg 243 and add tsc as a script in package.json

@angular/http": "2.0.0 is required only for the client. For the simple Web server it's not needed. you need to run the tsc command in the server directory for that example.

Yakov Fain wrote:@angular/http": "2.0.0 is required only for the client. For the simple Web server it's not needed. you need to run the tsc command in the server directory for that example.

My apologies if I am incorrect, but the hello_server.ts file has this import at the top:

import * as http from 'http';

I was following along with the book and running the "npm run tsc" command from the http_websocket_samples project folder, and that is the folder that has the tsconfig file. Note also that the code that came with the book ran fine (and it does have the @angular/http dependency included), it was just that in my case I needed to include this dependency to get simple server to work.

Great book also, I'm very happy with it.

Sorry for editting your post by mistake, Yakov, my bad...

===

My apologies if I am incorrect, but the hello_server.ts file has this import at the top:

import * as http from 'http';

I was following along with the book and running the "npm run tsc" command from the http_websocket_samples project folder, and that is the folder that has the tsconfig file. Note also that the code that came with the book ran fine (and it does have the @angular/http dependency included), it was just that in my case I needed to include this dependency to get simple server to work.

Great book also, I'm very happy with it.

import * as http from 'http'; is not about Angular. It's a different package required for Node.js HTTP support.

For the Typescript example Listing 2.1 index.html, I had to move the line `<script src="//unpkg.com/core-js/client/shim.min.js"></script>` above the line `<script src="//unpkg.com/zone.js@0.6.12"></script>` and change the zone.js version to @0.6.25 to get the example to run.

Things change fast with Angular... I'd recommend you to start working with newer examples that use not System.js, but Angular CLI. See the readme file at the https://github.com/Farata/angular2typescript repo and use code samples in Angular4 directory.

Currently, we're working on the second edition of this book, and if you want to use Angular 5, see code samples at https://github.com/Farata/angulartypescript