Angular4の環境構築手順まとめ
Angular4の勉強してみようと思って、環境構築の方法を調べてたら、npmを使ってAngularをインストールする必要があるみたいなので、実際にインストールした時の手順をまとめました。
Angular4の環境構築にはnpmをインストールする前にNode.jsのインストールが必要ですが、Node.jsのインストール手順については、こちらを参考にしてもらえればと思います。
npm(Node Packaged Module)とは
https://www.npmjs.com/Node.jsのパッケージマネージャです。Node.jsをインストールすると一緒にインストールされます。
Node.jsで利用するライブラリやパッケージの「インストール」「削除」「依存関係の整理」などを行うツールです。
Angularとは
オープンソースのフロントエンドWebアプリケーションフレームワークです。
詳しくはこちらを確認してもらえればと思います。
https://angular.io/angular-cliインストール
もし、古いバージョンの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アプリケーションフレームワークの動向もチェックしていきたいですね。