Published: May 30, 2019
Angularを仕事で触ることになりました。Webだと最近はLaravel(php)やGatsbyJS(ReactJS)と楽しく戯れていたのですが、いよいよノータッチだったAngular(TypeScript)を勉強せねばならなくなりました。
デフォルト設定のままワークスペースを立てます。 基本的にはボタンをぽちぽち押していけば立てられますが、AWS Cloud9 の IDE チュートリアル - AWS Cloud9に詳しく記載されています。不安な方は参照してください。
Cloud9はワークスペースを立てた段階でnodeもnpmも入っています。不安な方はnode -v
とnpm -v
を入れてみてください、バージョンが出力されれば成功です。
Angularアプリのプロジェクト生成や実行などが行える公式のコマンドラインツールです。
ng
から始まるコマンドはこのAngular CLIが入った環境で機能するコマンドです。(Angularだから「an」とかじゃないんですね、私の脳みそ安直?)
たった一行だけです。
npm install -g @angular/cli
はい、この記事終わりです。
まとめ
? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. (y/N)
統計情報を提供するか聞かれます。お好みで選択してください。
公式のプロジェクトはもちろん、他のCloud9ワークスペースのプロジェクトをGit cloneしてきてもダメでした。 今回このエラーを解決する時間がもったいなかったので必要なファイルをコピペしてAngularの勉強に励みました。 ちょっと不便だなぁ…
Angular CLIがあればgit cloneできなくても大丈夫!すぐにビルドできる状態の新規プロジェクトをコマンド一つで作成してくれます。
ng new sample
作成できたら
cd sample
でプロジェクトの中に移動します。
今はただのフォルダ群ですが、何も変更を加えなくてもビルドが可能です。 「Hello World!」さえ打たなくていいのはありがたいです。
ng serve --host 0.0.0.0 --port 8080 --disableHostCheck
ローカルにAngular環境を作る時にはng serve
だけでいいのですが、Cloud9はホスト名やポートの設定が必要なようです。
--public 自身のホスト名.c9users.io
をつけるのが良さそうですが長すぎて試してすらいません
package. jsonでコマンドを登録しておくとnpm start
だけで動くようになって非常に便利です。
が、私はなぜかエラーで弾かれます。
ng serve
を打った時と同じエラーなのでうまく変えられてないんですかね?
Angular環境を整えたワークスペースがサクサク作れるのですぐに開発の勉強に入れました。 Cloud9ワークスペースにGit環境を導入する方法を紹介していますのでこちらもぜひご覧ください。