laravel5.2上でAngular2のQUICKSTART を動かす方法
（2016年10月21日 一部追記）
気が付いたら、Angular2がリリースされていたので、この機会に、
Angularの学習をはじめてみようと思います。
ちなみに、AngularJS1は、ほぼ触ったことないです。
普通に公式ページのチュートリアルをなぞってもしょうがないので、
laravel上で、Angular2のQUICKSTARTを動かしてみようと思います。
■Angular2 – QUICKSTART
https://angular.io/docs/ts/latest/quickstart.html
完成系は、以下の通り。
■github
https://github.com/dog-ears/angular2-quickstart-on-laravel
環境は、Cloud9で進めます。
では、始めます。
(1) laravelのインストール
以前書いた下の記事の(1)を参考にCloud9にlaravelをインストールしてください。
http://dog-ears.net/laravel/20160223/
(2) nodeとnpmのアップデート
現時点で、Cloud9では、
nodeは4.4.0
npmは2.14.20がインストール済み
要求されるバージョンは、以下の通り
node v4.x.x ～
npm 3.x.x ～
なので、npmのみアップデートします。
■Node.jsとnpmをアップデートする方法
http://parashuto.com/rriver/tools/updating-node-js-and-npm
npm update -g npm
(3) node_modulesの設定
通常だと、package.jsonと同じ階層にnode_modulesが作られてしまうが、
今回は、public/node_modulesフォルダにモジュールを入れたい。
■node_modules を別の場所に置く
https://lowreal.net/2014/02/14/1
i) /public/node_modules フォルダを作成
ii) npm install する前に、package.json があるディレクトリに ln -sf で、i)で作ったnode_modules ディレクトリへ symlink を貼る
iii) npm install 実行（※後述の(5)で実行するため、まだやらない）
ついでに.gitignoreに
/public/node_modules
を追加しておく
(4) 各設定ファイルの作成
■package.json
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/package.json
“start": “tsc && tsc -w",
上記部分、一部修正してます。
サーバーは取り急ぎ、立ち上がらないようにしました。
【2016年10月21日 追記】
package.jsonを一部修正しました。
修正前の状態だと、resources/assets/typescriptフォルダ下にあるhtml、CSSファイルがpublicフォルダに行かない（tscコマンドでは、.tsファイルのみコンパイル＆移動される）ため、以下の対応をしています。
i) cpxのインストール
npm install cpx
ii) npm-run-allのインストール
npm install npm-run-all
iii) package.jsonのscriptを以下のように修正
"start": "npm-run-all -p tsc:w copyhtmlcss",
"copyhtmlcss": "cpx \"./resources/assets/typescript/**/{*.html,*.css}\" ./public -w",
（参考）cpx と rimraf を試す
http://akabeko.me/blog/2015/09/cpx-rimraf/
【追記ここまで】
■tsconfig.json
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/tsconfig.json
rootDirとoutDirを追加。
outDirで、コンパイルしたファイルをpublicフォルダに出力するよう設定
※rootDirのありがちな間違いについて
(参考) TSC with allowJs compiles its own compiled JS outside rootDir （英語のみ）
http://stackoverflow.com/questions/37845385/tsc-with-allowjs-compiles-its-own-compiled-js-outside-rootdir
ここで指定したディレクトリ以下をコンパイルする・・・のかと思いきや、そうではなく、
出力時のルート階層を指定するものです。
つまり、指定なしだと、/public/の下にresources/assets/typescript/app/～が生成され、上記ファイルの指定だと、/public/の下にapp/～が生成されます。
本来、入力ファイルの指定をする場合は、
tsc [ディレクトリ]/*.ts
みたいな指定をするのですが、この場合、プロジェクトルートが[ディレクトリ]になり、
tsconfig.jsonもその場所に置かなきゃいけなくなるっぽい。
このままだとルート下にある全.tsファイルがコンパイルされてしまうので、除外指定
“exclude": [“node_modules","vendor","public"]
をつけて回避してます。
※resources以外にtsファイルを置くことはないので、除外ではなく指定でもいいかも・・・。
■typings.json
→公式ページそのまま。
■systemjs.config.js
→公式ページそのまま。ただし、置き場所は、/public/js/
(5) npm install
(6) tsファイルの作成
/resources/assets/typescript/app/下に以下作成
内容は、公式ページそのままです。
■app.module.ts
■app.component.ts
■main.ts
(7) viewファイルの変更
resources/views/welcome.blade.phpを修正
■welcome.blade.php
https://github.com/dog-ears/angular2-quickstart-on-laravel/blob/master/resources/views/welcome.blade.php
※ビューのjsとcssのパスは調整してます。
ついでにpublic/cssフォルダにstyle.css作成
(8) tsファイルのコンパイル
プロジェクトルートで、以下実行
tsc
以上、
Cloud9でRun Projectすれば、QUICKSTARTの画面が確認できると思います。
おためしあれ。