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をインストールしてください。

laravelの開発環境構築

 

(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の画面が確認できると思います。

おためしあれ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です