ブラウザ上で動作し,共同開発が簡単にできるIDEのCloud9上で,Angular-CLIの開発環境を構築します.
Worspaceを作る
Create a new workspaceから,名前を入力し,テンプレートはBlankを選択してCreate workspaceをクリックします.
Node.jsのバージョンを上げる
デフォルトでインストールされているNode.jsとNPMのバージョンを確認します.
$ node -v
v6.11.2
$ npm -v
3.10.10
Angular-CLIにはNode.js 6.9.0以上,NPM 3以上が必要なので,NVMを使って新しいバージョンのNode.jsをインストールします.Cloud9にはデフォルトでNVMがインストールされているので,以下のコマンドを実行してNode.js 6.9.0をインストールします.
$ nvm install v6.9.0
Downloading https://nodejs.org/dist/v6.9.0/node-v6.9.0-linux-x64.tar.xz...
######################################################################## 100.0%
Now using node v6.9.0 (npm v3.10.8)
Node.js 6.9.0がインストールされていることを確認します.
$ node -v
v6.9.0
Angular-CLIをインストールする
公式の説明に従って,Angular-CLIをインストールします.仮想環境なので,-gオプションを付けてグローバルモードでインストールします.メモリが512MBでは,結構時間が掛かります.
$ npm install -g @angular/cli
プロジェクトを作る
$ ng new PROJECT-NAME
$ cd PROJECT-NAME
ここまでは公式と同じです.サーバーを立ち上げる時に,公式と同様に,
$ ng serve
と入力するだけでは,立ち上げたサーバーに接続できないので,以下のコマンドでサーバーを立ち上げます.workspacenameとusernameは適宜読み替えて下さい.
$ ng serve --host 0.0.0.0 --public workspacename-username.c9users.io
ブラウザでhttps://workspacename-username.c9users.ioにアクセスし,Welcome to app!のページが表示されたら成功です.
サーバーを立ち上げるシェルスクリプトを書くと楽です.
# !/bin/bash
ng serve --host 0.0.0.0 --public workspacename-username.c9users.io