本当に10分で始めるAngular2RC2開発

今回Angular1ベースのプロジェクトをAngular2に移転する作業をしました。node.jsプロジェクトは設定が難しくて大変ですが、今回はangular-cliのおかげさまで簡単に終わりましたので記録を残します。

開発環境はマックブックですけど、他のプラットフォームでもそんなに変わりはないと思います。まずはnpmをインストールします。マックではnvmを利用して簡単に設置、管理出来ます。

brew install nvm
nvm install v6

v4でも良いでしょう。

angular-cliを使うためには以下のライブラリが必要です。

npm i -g eslint angular-cli typings

v6ではまだ警告メッセージが表示される場合がありますが、動作には問題ありませんでした。気になる方はv4で挑戦してみてください。
そして、見る通り、angular-cliはまだbetaなので、これからどう変わるか分かりません。このマニュアルの寿命も1ヶ月しないかもしれませんね。

そろそろ本格的にプロジェクトを生成しましょう。

cd ~/path_to_projects
ng new project

ngコマンドを使って簡単に生成出来ます。この段階で終わるのが理想ですが、angular-cliはまだRC２に対応してないので、ライブラリのバージョンアップとangular/formsの適用が必要です。

私はAngular2の作業の為にVS Codeを使っています。viでもなんでもいいですが、やっぱりintellisenseは楽ですね。以下は私が使ってるプラグインです。

EditorConfig.EditorConfig-0.2.7/
christian-kohler.npm-intellisense-0.1.1/
dbaeumer.vscode-eslint-0.10.16/
johnpapa.Angular2-0.4.4/

これからはファイルの修正です。生成したプロジェクトフォルダーにあるpackage.jsonを修正します。

  "dependencies": {
    "@angular/common": "2.0.0-rc.2",
    "@angular/compiler": "2.0.0-rc.2",
    "@angular/core": "2.0.0-rc.2",
    "@angular/http": "2.0.0-rc.2",
    "@angular/forms": "0.1.0",
    "@angular/platform-browser": "2.0.0-rc.2",
    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
    "@angular/router": "3.0.0-alpha.7",
...

rc.1をrc2に変えてrouterをlpha.3からalpha.7にします。@angular/formsの追加も忘れずに。

src/main.tsにhttpとforms関係の設定は追加します。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AwardResultComponent, environment } from './award-result/';
import { HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

if (environment.production) {
  enableProdMode();
}

bootstrap(AwardResultComponent, [HTTP_PROVIDERS, disableDeprecatedForms(), provideForms()]);

disableDeprecatedFormsはRC2専用なので、RC3が出たら削除する必要があります。

src/system-config.tsにformsを追加します。

const barrels: string[] = [
...
  '@angular/forms',
...

ファイルの修正は終わりました。これからプロジェクトを始めましょう。

npm install
ng serve

http://localhost:4200/ に接続してapp works!メッセージが見えたら成功です。src/app/app.component.tsでtitleを変更して、自動にブラウザに反映されるか確認してください。もしbuilt-inサーバーが要らないならbuild –watchで十分です。

ng build --watch

これで終わりです。ng newからng serveまで本当に１０分もかからないです。

私の場合はbuilt-inサーバーの代わりにnginxを利用して作業をしましたが、dist/index.htmlをベースにページを作り、System.jsにbaseURLを設定したらなんの問題もなくAngular2が動作しました。

System.config({baseURL:'/path-to-projects/project/dist/'});

angular-cliを触ってみた感想はグーグル様はやっぱすごいってことでした。ngコマンドでいろんなことが可能なので、本当に別途に設定することがないくらいでした。

環境設定が簡単に終わったので残ったのはいいアプリを作成することです。typescriptに慣れて、 angular2 quickstartやangular2 seedなどのサンプルを参考しに、素敵なアプリを作ってみましょう。言い忘れましたが、テストの為のjasmine、karmaやajaxの為のrxjsも知っておくべきです。