Angular /WSL #TypeScript

まだまだ npm に慣れません。
とりあえず、npm version を更新しておきます。nvm などお使いの方は適宜どうぞ。

$ npm i -g npm
  ...
$ npm -v
5.6.0

Angular

Angular 公式 tutorial をやってみます。
https://angular.io/tutorial

淡々といきます。

$ npm install -g @angular/cli
$ ng new angular-tour-of-heroes

2015 年くらいの DELL xps 13 でやっていますが、node ががんばって cpu は 100% まで使われておりマルチコアを効率よく使っているように見えます。ただし Windows Search Indexer もがんばっていて、そちらは完全に電力のムダ感が強いです。

$ cd angular-tour-of-heroes
$ ng serve --open

何も問題なくブラウザが起動し、ページが表示されました。
VSCode を起動し、つくった angular-tour-of-heroes を "File" > "Open Folder..." で開きます。src/app/app.component.html を変更し保存すると、自動でブラウザに反映されました。Typescript file の変更も自動で検出され、compiler が自動で走ってブラウザが auto reload されます。完璧です。

Angular Material

気分がよいところで、そのまま最近 version が Angular 本体にあわせられ導入しやすくなった (個人の感想) Angular Material を導入してみます。これも公式 Getting Started にしたがって進めます。
https://material.angular.io/guide/getting-started

$ npm install --save @angular/material @angular/cdk
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
...
$ npm install --save angular/material2-builds angular/cdk-builds
...

このへんの警告はあまり気にせず進めます。

今回は必須でない Step 2: Animations は飛ばしました
Step 3: Import the component modules に従って app.module.ts に import, imports 文を追加します
Step 4: Include a theme に従って、styles.css に文をコピペします
あとは必須でなさそうなので飛ばしました

以下の例から、Raised Buttons を app.component.html にコピペします。
https://material.angular.io/components/button/examples

app.component.html

<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

何の問題もなく Material ぽいボタンが表示されました。
せっかくなので、ボタンにクリックイベントのハンドラを仕込みます。

app.component.ts

  onClick(): void {
    console.log("onClick.");
  }

app.component.html

  <button mat-raised-button (click)="onClick()">Basic</button>

auto build, auto reload も完全に動作してボタンを押して console log に出力が確認できました。完璧です。

まとめ

今回確認した範囲では、WSL で Angular + Angular Material + VSCode での開発が快適にできそうでした。Mac でやるのとなんら変わらないです。今回とは別に tutorial を進めたこともありましたが特にハマった記憶はありません。Chrome の debugger extension は試したか忘れました。いろんな module など使ったりなどしていくとハマることはあるかもしれませんが、カンタンな練習などでは WSL でも困ることはなさそうです。