cloud9でAngularの学習を進めるまで(環境構築等)

環境構築

まずはcloud9を開いてプロジェクトの作成。 https://console.aws.amazon.com/cloud9/home 無料でプロジェクトが作成できるが、初回はクレジットカードの登録が必要。

以下のQiitaが参考になる。おおよそはこれに沿ってやっていけばOK。 https://qiita.com/siro33950/items/3e4ab29deef8d97ef00a https://qiita.com/siro33950/items/005790021823bc2afef0

nodeとnpmのバージョンを確認。

ec2-user:~/environment $ node --version
v6.14.3
ec2-user:~/environment $ npm --version
3.10.10

その後

// Angular-CLIをインストール
npm install -g @angular/cli

// Angular-CLIを利用してプロジェクトを作成
ng new アプリ名

Angular-CLIをインストールし、プロジェクトを作成しようとしたのですが、

You are running version v6.14.3 of Node.js, which is not supported by Angular CLI v6.
The official Node.js version that is supported is 8.9 and greater.

Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.

とエラーが出たので、7/30現在のnode.js推奨版の8.11.3をインストール。 https://nodejs.org/ja/

$ nvm install v8.11.3

ec2-user:~/environment $ node --version
v8.11.3

再度プロジェクトの作成。 しかし、

ec2-user:~/environment $ ng new アプリ名
bash: ng: command not found

ということなので、再度Angular-CLIをインストール

// Angular-CLIをインストール
ec2-user:~/environment $ npm install -g @angular/cli
ec2-user:~/environment $ ng new アプリ名

プロジェクトが作成完了し、cd アプリ名で移動。

アプリの実行

アプリの実行も以下の記事を参考にしていった https://qiita.com/siro33950/items/005790021823bc2afef0 しかし、以下のようにオプションが使えないと表示されてしまいアクセスできない。

 $ ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com
Unknown option: '--public'

https://www.youtube.com/watch?v=n0y0JX0S2Go このYouTubeに習って以下のようにしてもアクセスできた。

ng serve --host 0.0.0.0 --port 8080 --disableHostCheck

しかし、あまりよくない感じはするが特に何もするなく立ち上げまでできたので、あまり気にならなければこれでいい気がする。

package.jsonで指定しておくと楽でいい。

{
  "name": "angular-cal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 8080 --disableHostCheck", // 追記
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  // 以下略

すると以下だけで実行できる。

npm run start

しっかりホスト名を指定してアクセスする方法

https://tyablog.net/2017/05/13/cloud9-angular2/