Hello readers!
After this book was printed, new versions of Angular are being released. SystemJS is not used in Angular projects anymore, and you can find the Angular CLI version of book code samples migrated to Angular 4 in the directory Angular4 in the GitHub repository https://github.com/Farata/angular2typescript.
At the time of this writing, the latest version of this framework is Angular 6, and we already wrote the second edition of this book. While lots of materials were reworked, many code samples didn’t change, and you may download the code samples that come with the second edition of this book from https://github.com/Farata/angulartypescript. This repository has a directory code-samples, which contains code samples for Angular 5 and 6.
If you find any errors (except related to SystemJS) in Angular 2 Development with TypeScript not listed below, it would be most appreciated if you would post the issues in the book’s Author’s Online Forum in its Errata section so that they may be corrected for everyone’s benefit.
Page 24. Listing 2.1. Replace this line:
<script src="//unpkg.com/[email protected]"></script>with this one:
<script src="//unpkg.com/[email protected]"></script>Page 26. Listing 2.2. One code callout reads "Inside the constructor, you initialize the name property with the value Angular 2 bound to the template." The digit 2 has to be removed from this text.
Page 26. Listing 2.2. Use back ticks instead of single quotes in the template. Replace this:
template: '<h1>Hello {{ name }}!</h1>'with this:
template: `<h1>Hello {{ name }}!</h1>`Page 47. Replace "in section 2.4.1." with "in section 2.1.4."
Page 55. Remove the second the from the following text fragment: "you’ll create the three the most interesting components".
Page 92. The sentence that starts with "Note the parentheses" should read "Note the parentheses in the URL of the auxiliary route, https://localhost:8080/#/home(aux:chat)".
Page 95. The text fragment "RootModule and BrowserModule" should read "RouterModule and BrowserModule".
Page 99. Remove we in "you we didn’t declare"
Page 100. Add Step 7 with the following content:
Add the following line to system.config.js:
'@angular/router' : {main: 'router.umd.min.js'}Page 101. Add the following import statement to Listing 3.21:
import { Product, ProductService } from '../../services/product-service';Page 144. Replace "DOM attribute" with "DOM property"
Page 157. Listing 5.4. A pair of parentheses is missing. Replace this line:
console.log(`The price of ${stock} is ${100*Math.random().toFixed(4)}`);with this one:
console.log(`The price of ${stock} is ${(100*Math.random()).toFixed(4)}`);Page 159. Listing 5.5.
Due to changes in the Weather server API we had to re-write the code of this example to handle the case when the city is not found and the server returns 404 killing the data stream. Now we use the catch operator to intercept the error and replace the dead observable with an empty one. The new version of this example is available at https://github.com/Farata/angular2typescript/blob/master/chapter5/bindings_and_events/app/observables/observable-events-http.ts.
Page 161. Replace this paragraph:
"Typing the word London takes more than the 200 milliseconds specified in debounceTime(), which means the valueChanges event will emit the observable data more than once. To ensure that the request to the server takes more than 200 milliseconds, you need a slow internet connection."
with this one:
"We don’t want the first Observable - valueChanges - to emit the city name unless the user wasn’t entering any letter in more than the 200 milliseconds. Hence we specified this interval in debounceTime(). This lowers the number of server requests made by getWeather()."
Page 163. The correct link to the DatePipe is https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
Page 164. Replace this sentence: "If your component uses custom pipes, they have to be explicitly listed in its @Component annotation in the pipes property."
with this one:
"If your components use custom pipes, they have to be explicitly listed in the module’s @NgModule annotation in the pipes property."
Page 167. Listing 5.9. Remove the line that imports FilterPipe from the code. In pre-release versions of Angular it was required, but then the declaration of pipes was moved to the module class. So the app.module.ts need the following import line:
import {FilterPipe} from "./components/pipes/filter-pipe";Also, you should add FilterPipe to the list of declarations in @NgModule.
Page 175. Listing 6.3. Right above @NgModule insert the following code fragment (it exists in the code sample though):
class AppComponent {
stockSymbol: string;
price:number;
priceQuoteHandler(event:IPriceQuote) {
this.stockSymbol = event.stockSymbol;
this.price = event.lastPrice;
}
}Page 179. Replace "mediator.ts — PriceQuoterComponent and OrderComponent" with "mediator.ts — AppComponent"
Page 181. Replace the text "When the value of the buy input property on OrderComponent changes," with "When the value of the stock input property on OrderComponent changes,"
Page 185. This page include the text "…encapsulated—the entire window is shown with the parent’s light green background.". The word parent has to be replaced with the word child.
Page 192. Replace the following sentence:
"As an alternative, you could declare an interface (such as interface IChanges {[key: string]: SimpleChange};), and the function signature would look like ngOnChanges(changes: IChanges)."
with this one:
""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})."
Page 247. Replace this text:
"(run nodemon build/auction-rest-server.js)"
with this one:
"(if nodemon is installed globally run nodemon build/auction-rest-server.js; otherwise modify the dev script in package.json)"
Page 249. Listing 8.6. Add the following line to the dependencies section:
"reflect-metadata": "^0.1.10"Page 260. Replace "or npm simpleWsServer)." with "or npm run simpleWsServer)."
Page 264. Replace this line:
"import {Observable} from 'rxjs/Rx';"
with this one:
"import {Observable} from 'rxjs/Observable';"
Page 314 Listing 10.3. As of webpack 2.3.0, a different path resolution is required. Replace this line:
path: './dist',
with this one:
path: path.resolve('./dist'),
Page 316. Listing 10.5. Update the webpack and webpack-dev-server to the latest version in devDependencies :
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"Page 317. Listing 10.6. As of webpack 2.3.0, a different path resolution is required. Replace this line:
path: './dist',
with this one:
path: path.resolve('./dist'),