f:id:fa11enprince:20180130152024j:plain 2018/08/12更新
最近開発でAngular(2+) + TypeScript + Spring Bootを使っています。
それぞれのバージョンの詳細はこんな感じです。
Angular 6
TypeScript 2.7.2
Spring Boot 1.5
Java 8
Maven 3
Node.js 8.11.3
Angular-CLI 6.0.8

実際の構成例

GitHubに置きました。

AngularのチュートリアルとSpring Bootのチュートリアルを混ぜたものです。
ArpitSuthar (Arpit Suthar) · GitHub のをforkしました。

大まかな構成

TypeScriptをどう、SpringのTomcatと連携させるか考えていました。
あんまり複雑な構成にしたくなく、AngularJS（1系）の時のようにお手軽に使えるようにしたかったのです。
それでいろいろ調べたところ、下記の構成にしました。

src
 └ main
      └ client ... ここにAngularのソースを書く(npmで管理しているのもこの配下)
      └ java
      └ resources
         └ static ... ここにAngularのTypeScriptのビルド結果が入る(Angular専用ディレクトリにする)
         └ public ... Spring bootのstaticのかわりにここを使う。Thymeleaf等で参照したいものがあればここに入れる

ご覧の通りSpring Bootが中心の構成になっています。
Angular2+は基本的にフルでSPAで作るといった感じになります。
AngularJSは何も考えずに一部画面だけにAngularJSを適用するとかができましたが、
Angular2+の場合はちょっと考えないと一部画面だけAngular適用ってのは辛いです。。フルでSPAにしたくない場合は、特定のパス配下はThymeleafでやるといった運用も可能です。今回のサンプルは特にパッケージ(名前空間)を特に分けてないので、このままではそれはできませんが、 packageを何らかの名前で切ってangular.jsonのBaseHrefで設定すればこの配下だけAngularというのは可能です。

ビルドはmavenにやらせてmaven経由でnpmをたたいてnpmのpackage.jsonからAngular-CLIのngコマンドをたたいて
TypeScript→JavaScript変換をしてビルドする感じです。

Angular2+について

AngularJSをちょっとだけ触ったことがあったのですが、
AngularJSに比べてかなり使いやすいです。学習コストは高いといわれますが、周辺のエコシステムを学ばなくていい分Reactよりだいぶ学びやすいと思いました。
TypeScriptの恩恵もあってか、どう作ればいいかという道しるべを示してくれている分、
あんまり書き方に差異は出ないような気がしました。複雑になってきたらServiceにとりあえず逃がしておけばよいといった感じで。
TypeScript素敵です。ES6よりも当然、良いです。JavaScript全部TypeScriptにならないかな…と思える今日この頃です。

Spring Bootについて

Spring単体だと嫌なイメージしかなかったのですが、なかなか素敵なフレームワークです。
ただ、Ruby On Railsとかに比べるとやや生産性は落ちる気がしますが、それでも素敵なフレームワークだと思います。
規模が大きくなっても全然辛くならないフレームワークですね。ただ、JPAというかHibernate、テメーはダメだ。
Hibernate、機能多すぎて、ハマりも多すぎて辛い…。RailsのActive Recordくらいシンプルになればいいのに。

ハマったところ

Angularがどう頑張っても更新されない…watchしてんのに…。
Angularのhtmlを更新してもなんで反映されないのよ…Springのdevtoolいれてんのに…と思っていました。

IntelliJだとこのハマりはないっぽいです。

なんで更新されなかったかというと、Eclipseがリフレッシュをうまいこと効かせてくれなくて、そのためEclipseからのSpring Boot Appから普通は動かすと思うのですが（デバッグ時）
その時は
target/classes/resources/static/
を見に行きます。

一方、デプロイして動かす環境やmvn spring-boot:runで動かしたときは
webapp/src/main/resources/static
を参照しに行き、そちらを見に行きます。

いずれにしてもリフレッシュがうまくいかなくてstaticディレクトリに入ってくれないんです。ただ、Eclipseをリフレッシュしてしまえば、うまくいくこともママあります。 native pollingをONにしても解決しない…だれかうまい解決方法しらないかな？仕方ないんで、都度都度Spring Boot Appの再起動をかけるか、リフレッシュしてプラグインで強制同期かけてます。