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!
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' "
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
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;
}
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.
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.
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.
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.
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."
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.
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)
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.
"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.
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.
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.
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.
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.
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.