ローカルにAngular 開発環境を構築する(Mac)

 

ojisanarekore.hatenablog.com

 

 前回の記事に書きましたが、StackBlitzの調子が悪くマシンを再起動しても

キャッシュをクリアにしても表示できないので、PCにローカル環境を

構築することにしました。

もし仕事で使うことになった場合は、きっとローカルに環境を構築する

と思いますし、やって損はありません。

勿論無料にこだわりましょう。

 

 

VisualStudio Codeをインストール

Windows, Mac問わず利用できる以下を利用したいと思います。

azure.microsoft.com

ダウンロードしてインストールしてください。

 

Angularをインストール

Angular 日本語ドキュメンテーション

Angular公式の前提条件を確認しますとnode.js,npmが入っている事が

条件との事です。

おじさんよくわかりません。

 

nodejs.org

ja.wikipedia.org

 

まぁ結局の所、よくわかりませんが、Node.jsをインストールすれば

おまけでnpmがついてくる事がわかりました。

 

Node.jsの確認

Macのターミナルを開き、npm -vと打ちます。

おじさんの環境には、v10.16.0が入っていました。

おじさんの場合はアップデートで対応できそうです。

 

Node.jsの設定

Node.jsのアップデート

ターミナルで以下を実行します。

  1. sudo npm install -g n(npmのnという管理ツールインストール)
  2. n --stableで公式サイトと同じ推奨versionであることを確認(12.16.1)
  3. sudo n stableでNode.jsアップデート
  4. node -vでアップデートされたことを確認
  5. sudo npm update -gでnpmの更新
Node.jsの新規インストール

入っていない方は、以下のインストーラで新規インストールしましょう。

nodejs.org

 

Angularインストール 

Angular 日本語ドキュメンテーション

公式サイトに書いてある通り、ターミナルを開いて

npm install -g @angular/cli

を実行します。

ng versionでAngularのversionが出てきたら完成です。

やっとAngularをインストールできましたね。

 

次回は、ローカルでAngularプロジェクトの作成と、

Visual Studio Codeの環境設定を行います。 

 

 

ojisanarekore.hatenablog.com