angular

Angularが生成するHTML

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>

Angular:詰まったときのデバッグ

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

Type 'Promise<Hero[]>' is not assignable to type 'Hero[]'.

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

A function whose declared type is neither 'void' nor 'any' must return a value.

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

routerLinkの周りの[]はどういうケースでつけるのか?

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

エラー:Declaration expected.

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

ngForがdeprecatedである点について

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を見たところ、どうやら…

Can't bind to 'ngForIn' since it isn't a known property of

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

Angular:ビルドしたファイルの場所

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

Angularの公式チュートリアル:第6章「Routing」

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

Angularの公式チュートリアル:第5章「Services」

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

Angularの公式チュートリアル:第4章「Multiple Components」

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

Angularの公式チュートリアル:第3章「Master/Detail」

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

Angularの公式チュートリアル「Tour of Heroes」:第2章「The Hero Editor」

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

AngularのQuickStart

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