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

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

Angular4の環境構築には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でブラウザが自動で起動します。

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

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

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