1回やると以降は基本やる機会が無くて完全に忘れてる内容なのですが、新規環境にゼロベースでインストールする機会があったので自身のメモも兼ねて手順をおこします。Win や他 OS 環境でも同じような手順で可能ですがインストールするツールが微妙に違ってくるのであくまでも Mac での手順ということで。因みに OS は Mojave です。
node.js 環境の構築
Angular は node.js を利用するのでそのインストール。node.js は公式インストーラーからでもインストール可能だが、開発を進めていくうちに node.js のバージョンが気になり始めるとバージョンの切り替えが行いにくいので、公式インストーラーからのインストールは行わないでおく（公式インストーラーを利用しないからといって非公式というわけでは無い）。
公式インストーラーを利用をしない場合の方法でも幾つかの方法があるがここでは
- Homebrew（Mac OS のパッケージ管理）のインストール
- nodebrew（node.js のインストールとバージョン管理）のインストール
- node.js の最新版をインストール
- Angular CLI（Angularアプリのプロジェクト生成や実行などが行えるコマンドラインツール）のインストール
の流れで実施。
因みに nodebrew を選択しているのは単純に既存他環境と合わせるという理由で選択。他の選択肢としては ndenv も良さそうな気がする。
Homebrew のインストール
公式サイトに行けば冒頭にターミナルにこれをコピペして実行してねと書かれているので以下のコマンドをターミナルにコピペして実行。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストール時に OS ログインユーザーのパスワードが聞かれるので、聞かれたらパスワードを入力して続行。インストールが完了後、確認としてターミナルに
brew -v
と入力して
Homebrew 1.8.4
という具合にバージョンが表示されればOK。
nodebrew のインストール
brew install nodebrew
をターミナルで実行。終了後確認として
nodebrew -v
でバージョンが表示されればOK。確認が出来たら
nodebrew setup
で nodebrew のセットアップ。セットアップの最後に
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
と出てくるので
export PATH=$HOME/.nodebrew/current/bin:$PATH
の箇所をコピペして .bash_profile にコピペする。.bash_profile の場所はログインユーザーの Home ディレクトリ。実際の場所は例として
/Users/[user name]/.bash_profile
になる。.bash_profile が無い場合はテキストエディタ（プレーンテキストで）とかで作成。ファイルは不可視ファイルなので目視確認したい場合はこの記事を参照すればOK。.bash_profile を作成したらターミナルを ⌘Q で終了。これで nodebrew のインストールは完了。
node.js の最新版をインストール
とりあえず node.js の安定板をインストール。
nodebrew install-binary stable
インストール後
nodebrew ls
でインストールされたバージョンを確認。
v10.14.1
current: none
上記の場合は current が指定されていないので
nodebrew use 10.14.1
で current 指定。current の指定が出来たら
node -v
で node.js が正しく指定されているか確認。
v10.14.1
Angular CLI のインストール
ターミナルを起動し
npm install -g @angular/cli
を実行。以上で Angular CLI のインストールは終了。バージョン確認する場合はng v で。
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.1.1
Node: 10.14.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.11.1
@angular-devkit/core 7.1.1
@angular-devkit/schematics 7.1.1
@schematics/angular 7.1.1
@schematics/update 0.11.1
rxjs 6.3.3
typescript 3.1.6
とりあえず Angular の新規アプリを作成してみる
ng new MyApp
をターミナルで実行。ターミナルで現在のディレクト内に MyApp というディレクトリが作成されて、その中に諸々ファイルが作成される。因みにコマンド実行直後に
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ http://sass-lang.com
]
という感じで Angular routing を追加するの？stylesheet は何使うの？と聞かれるので routing は Yes、stylesheet はお好みのものを選択で進行すればOK。あとはターミナル上でつらつらとコマンドが流れていくので眺めておく。
完了後ターミナルで
cd MyApp
で作成した Angular アプリディレクトリに移動し、
ng serve
を実行、Compiled successfully. と表示されたらブラウザで http://localhost:4200/ にアクセスし以下の画面が出たらOK。
以上でひとまず Anglar が動く環境は出来ました。
次は Atom で TypeScript の設定をしようと思います。