いま限定！AngularDart5のはじめかた

最近、思い立ったようにAngularDartでサイトを作りたくなったんですが、やっぱりいまならDart2+Angular5ではじめたいですよね。正式リリース前のこの時期限定ネタですが、同じように今から手を出そうとしている方おられましたら参考にしてください。

ちなみに思い立っただけあって、つくりこみは全くすすんでません。汗

新バージョンのパッケージとドキュメントへのリンク

About AngularDartでCurrent versionをクリックすると、新しいバージョン（いまですとangularなら5.0.0-alpha+10）のパッケージおよびドキュメントへのリンクがあります。

ビルド

以降、mac前提で書いてますが、全ての環境にあてはまります。dartは開発版(Dart 2)をインストールしておきます。

$ brew install dart --devel
$ dart --version
Dart VM version: 2.0.0-dev.49.0 (Wed Apr 18 20:41:36 2018 +0200) on "macos_x64"

Dart 2からデバッグにDartiumは不要です。--with-content-shellも--with-dartiumもdeprecatedになります。

Install Dart

チュートリアルTour of Heroesの完成版ソース、toh-6にangular5向けの5-devブランチが用意されていますのmasterブランチはすでに5.0.0用がマージされています。そちらでビルドしてみましょう。

$ git clone https://github.com/angular-examples/toh-6.git

ちなみにチュートリアル開始時のソースはtoh-0です。

$ git clone https://github.com/angular-examples/toh-0.git

あとはパッケージを取得して起動するだけです。

$ pub get
$ pub run build_runner serve

5.0.0-alpha+5から、serve(build)でbuild_runnerを実行するように変更になってますので、ネット上の現バージョンネタを参照しているときは思い出してください。

Dart 2 Migration Guide - Tools

ブラウザから
http://localhost:8080
で見ることができます。

WebStormでのビルド

上記の通り、pub serve(build)はbuild_runnerを使用するように変更となりましたが、WebStormはまだ対応していないため実行(Run)もデバッグ(Debug)も失敗します。

/usr/local/opt/dart/libexec/bin/pub serve web --port=60169
Dart 2 will have a new build system. Learn how to migrate from pub build and
pub serve: https://webdev.dartlang.org/dart-2

どうやらWebStormが対応するのは 2018.2 2018.1.3からのようでEAPもまだですので、解決するのはもうちょっと先になりそうです。

WEB-31788 Allow to switch to 'pub run build_runner serve' instead of 'pub serve'.

これでよく晒せたな、といった代物で恐縮ですが、自分は以下のようなquick botchでしのいでいるとことです。

$ cd /usr/local/opt/dart/libexec/bin
$ mv pub pub.org # オリジナルpubを改名
$ ln -s /Users/myhome/bin/pub pub # なんちゃってpubスクリプトに置き換え

/Users/myhome/bin/pub

#!/usr/bin/env bash

DART_SDK_BIN="/usr/local/opt/dart/libexec/bin"

BUILD_RUNNER=$($DART_SDK_BIN/pub.org deps | grep build_runner)

if [[ ${BUILD_RUNNER} = "" ]]; then
        $DART_SDK_BIN/pub.org "$@"
        exit 0
fi

if [[ "$1" = "serve" ]]; then
        if [[ "$3" =~ ^(--port)=([0-9]+) ]]; then
                $DART_SDK_BIN/pub.org run build_runner "$1" "$2":${BASH_REMATCH[2]}
        else
                $DART_SDK_BIN/pub.org run build_runner "$@"
        fi
elif [[ "$1" = "build" ]]; then
        if [[ "$2" =~ ^(--mode)=(release|debug|.+) ]]; then
                $DART_SDK_BIN/pub.org run build_runner "$1" "$3"
        else
                $DART_SDK_BIN/pub.org run build_runner "$@"
        fi
elif [[ "$1" = "run" && "$2" = "angular_test" ]]; then
        $DART_SDK_BIN/pub.org run build_runner test -- -p chrome
else
        $DART_SDK_BIN/pub.org "$@"
fi

そもそもそんなことしなくてもできるとか、他にもっといい方法があるだとか、ご存知でしたらどなたか大声で教えてくれると助かります。

デバッグ(Debug)もできてたんですがいまやってみるとブラウザと接続できなくなってる、、、。もう一手間あったかな？確認しときます。時間がかかってただけで、デバッグ(Debug)もできてました。（ひょっとしたら出来ないケースがあるのかも。）