職場で新人が分報でわからんと言っていたので、横からソース見て、コメントしたら間違ったアドバイスをしてしまったということがありました。
そもそも、自分、Angular触ったことなかったな、と。
ということで、Angularを触ってみることにしました。
とりあえず、最初のアプリは出来ました。
Tour Of Heroes
実践形式のチュートリアルとして、ツアーオブヒーローズが用意されています。英雄たちの旅行ということになるのですが、すごい名前ですね。
人材派遣会社がヒーローを管理するアプリを作りながら、Angularについて学ぶことになります。
僕らのヒーローアカデミアの世界ですね。
Angularもng serve --openで実行中であればhtmlを修正して更新すれば自動的に反映されます。
再度ビルドして実行という手間は不要です。
あと、動かしながら気付くのは、TypeScript前提であることでしょう。
なので、しっかりしたコードを書くことができます。
ハマったこと
htmlがおかしい
これを検知してくれませんでした。
<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name | uppercase}} Details</h2> <div><span>id: </span>{{selectedHero.id}}</div> <div> <label>name: <input [(ngModel)]="selectedHero.name" placeholder="name" )]> // )] ではなく / </label> </div> </div>
HttpClientModule を宣言するとエラー
This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
以下のコマンドを実行する。
npm cache clean --force
TSLintの指摘
import fromのfromのモジュールはダブルクォーテーションだとNG
シングルクォーテーションにする。
不要なスペースを入れない
返り値がない場合はvoidを指定する
おまけ
Angularとは英語で角ばった、無骨なという意味です。