【書評】Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク Chapter09 アプリケーションの構築 をやってみた

次の本を買ったのだが、一通り読んだ後に Chapter09 アプリケーションの構築 を実際にやってみたところ、そのままだと動かなかったところが結構あったのでメモがてら書いておく。

TL;DR

すごく勉強にはなったけど、Chapter09 アプリケーションの構築 に関しては、確認しなさすぎ & 間違い多すぎ。
「執筆時から時間がたって動かなくなってしまった」。ならわかるけど、発売して2週間もたってないのにこれは酷い。

ただ、Angularの全体的な知識を得られる、という点でみるととても良い本だと思う。

前提

筆者の Angular CLI のバージョン

% ng --version

Angular CLI: 1.6.1
Node: 7.7.2
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

HttpClientModule を使う

HttpClient は Deprecated になってる模様。（これはエラーにはならなかったけど警告がでる。）

P300 コードL4
誤
import { HttpClient } from '@angular/http';
正
import { HttpClientModule } from '@angular/common/http';

表記ミス

P304 コードL10
誤
"/edit"
正
"/area/edit"

あと、ファイル名が間違ってたり、キャプチャがおかしかったりは大量にあったので記載しない（進める上ではそんなに重要じゃない部分なので）

Pipeのロケール指定

Angular 5だとそのままだと動かない模様。

issueが立ってた。

Angular - Internationalization (i18n)

Angular - DatePipe

起動時にLocaleを指定する必要があるみたい。

誤
ng serve
正
ng serve --locale ja

あと longDate を指定する。(yyyyMMddだと20180104となってしまった)

P320 コードL1
誤
{{weather.dt | unixTimeDate : 'yyyyMMdd'}}
正
{{weather.dt | unixTimeDate : 'longDate'}}

OpenWheatherMap の daily forecast は使えない（有料）

本には無料で使えると書いてあったが、実際には無料では使えなくてエラーになる。 最近有料になったのかなーと思ったけど Web archive を見る限り結構前から有料だったみたい。 著者は有料プランのAPI KEYを使ってたのかなーと予想。（というかこれは酷いと思う。一度でも読者になりきって確認すれば分かる内容のはず。）

zone.js:2975 GET http://api.openweathermap.org/data/2.5/forecast/daily?appid={{自分のID}}&units=metric&lang=jp&cnt=7&q=tokyo 401 (Unauthorized)

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク