[Angular] Angular 4 の環境構築手順まとめ

Angular 4 の勉強してみようと思って、環境構築の方法を調べてたら、 npm を使って Angular をインストールする必要があるみたいなので、実際にインストールした時の手順をまとめました。

Angular 4 の環境構築には npm をインストールする前に Node.js のインストールが必要ですが、 Node.js のインストール手順については、こちらを参考にしてもらえればと思います。

npm ( Node Packaged Module )とは

Node.js のパッケージマネージャです。 Node.js をインストールすると一緒にインストールされます。

Node.js で利用するライブラリやパッケージの「インストール」「削除」「依存関係の整理」などを行うツールです。

オープンソースのフロントエンド Web アプリケーションフレームワークです。

詳しくはこちらを確認してもらえればと思います。

もし、古いバージョンの angular-cli をインストールしてる場合は、一度アンインストールしてからインストールする必要があります。

# 古いangular-cliをアンインストール
$ npm uninstall -g angular-cli
$ npm cache clear

# angular-cliインストール
$ npm install -g @angular/cli

Node.js のバージョンは 6.9.0 以上が必要です。

# プロジェクトを作成するディレクトリに移動する
$ cd /path/to/project

# プロジェクトを作成する
$ ng new my-app

下記コマンドを実行してプロジェクトを実行します。

$ cd my-app
$ ng serve --open

[--open]オプションを指定することで、 http://localhost:4200 の URL でブラウザが自動で起動します。

こんな画面が表示されれば成功です!!

以上、 Angular 4 の開発環境構築手順になります。

最近はフロントエンドとバックエンドを分離させる開発手法も流行っているので、 Angular に限らず、他のフロントエンドの Web アプリケーションフレームワークの動向もチェックしていきたいですね。