Tour of heroesのチュートリアルをやっていて次のコードを書いてみました： <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero" [routerLink]="['/detail', hero.id]"> これがどういったHTMLとして生成されるか？おそらく、こんな感じだと予想していました： <li onclick="..."><a href="/detail?id=1">ヒーローの名前</a></li> しかし実際に出てきたソースはこんなでした…</li>

ng buildでコンパイル時にエラーが出てもエラーの原因が今ひとつわからない場合があります。 そんなときはtscコマンドで怪しそうなファイルをコンパイルしてみましょう。 tscコマンドのほうが役に立つ情報をはいてくれる場合があります。 例えば、次のソース…

これはHeroServiceにおいて、getHeroes関数の戻り値をHero[]からPromise<Hero[]>に変更した場合に発生しました。戻り値がPromiseになっているので、呼び出し側も相応に変更する必要があります。 変更前 ngOnInit():void { this.heroes = this.heroService.getHeroes(</hero[]>…

表題のエラーは、戻り値を指定している関数において何もreturnしなかった場合に発生します。 例： getHero(id: number): Promise<Hero> { this.getHeroes().then( promised_heroes => promised_heroes.find( hero => hero.id === id)); // returnが抜けている }</hero>

Tour of Heroesのチュートリアルでは、次の2箇所でrouterLinkが使われています。 <a routerLink="/dashboard">ダッシュボードへ</a> <a *ngFor="ler hero of heroes" [routerLink]="[ '/detail', hero.id ]" >{{hero.name}}</a> これはどちらでもいいというわけではありません。上記を逆にしてみます：

Angular4でのプログラミングにちょっぴり慣れてきましたが、エラーメッセージは不可解なものが多いです。 今回の Declaration expected はビルド時に発生しました。原因は、デコレータの終わりにセミコロンをつけていたため： @Component({ }); export class…

Angularのドキュメントを見ていたところ、ngForがdeprecatedとの記載がありました： https://angular.io/api/common/NgFor そこで、次のソースのngForをngForOfに変更したのですが、エラーがでます： <div class="heroes"> <li *ngFor="let hero in heroes"> {{hero.name}} </li> </div> stackoverflowを見たところ、どうやら…

ngForを使っていたところ、コンパイルが通るものの表題のエラーがコンソールに出力されていました。 原因はここでした： <div class="heroes"> <li *ngFor="let hero in heroes"> {{hero.name}} </li> </div> 正しくはlet hero of heroesとあるべきなのです。これはES6のforと合わせるためだそうです： for...of - JavaScript…

コンパイルしたjsファイルを生成するにはng buildをng serveの代わりに実行します。 するとdistフォルダにjsファイルが書き出されます。 これまでnpm start (ng serve)を実行していたのですが、jsファイルが生成されないのを不思議に思っていました。ng serv…

Tour of Heroesアプリに、新たな要件を加えます： ダッシュボードのビューを追加 ヒーロー一覧とダッシュボードの間を遷移可能にする どちらかのビューでユーザがヒーロー名をクリックすると、そのヒーローの詳細ビューに遷移する メールの中のディープリン…

サービス Tour of Heroesアプリを進化させていくにつれ、ヒーローのデータをアクセスするコンポーネントを増やすことになります。 同じコードを何度もコピペするのではなく、再利用可能なデータサービスを作り、それを、必要としているコンポーネントに注入…

第3章までに作成したプログラムではAppComponentが全てを担っていました。このペースで機能を追加していくとメンテナンスが難しくなります。 そこで本章では、それぞれが決まったタスクもしくはワークフローをもった複数のコンポーネントに分割していきます…

第3章では、複数のヒーローをリスト表示し、ユーザがヒーローを選択すると詳細を表示する仕組みを作ります。 元の記事はこちら ウェブサーバの起動 （既に実施していたら不要です） cd ~/angular-tour-of-heroes ng serve --host=0.0.0.0 --public=グローバ…

元のサイトはこちら。かなり端折っていますが一応日本語版です。 第2章ではアプリを実際に作ります。 チュートリアルでは開発をローカルで進めていますが私はWindowsユーザでローカル開発が苦痛なのでAmazon Linux上で進めます。 アプリの作成 アプリの起動 …

Angularを触ってみるため公式チュートリアルをやってみました。日本語版がないのでここに備忘録を兼ねて纏めていきます。 今回はまず、QuickStartです。私はAmazon Linuxを使っています。 QuickStartの実施 所要時間：約15分 Amazon Linuxのバージョン（参考…