Angular CLI 環境作成方法（Mac環境）

1回やると以降は基本やる機会が無くて完全に忘れてる内容なのですが、新規環境にゼロベースでインストールする機会があったので自身のメモも兼ねて手順をおこします。Win や他 OS 環境でも同じような手順で可能ですがインストールするツールが微妙に違ってくるのであくまでも Mac での手順ということで。因みに OS は Mojave です。

# node.js 環境の構築
Angular は node.js を利用するのでそのインストール。node.js は公式インストーラーからでもインストール可能だが、開発を進めていくうちに node.js のバージョンが気になり始めるとバージョンの切り替えが行いにくいので、公式インストーラーからのインストールは行わないでおく（公式インストーラーを利用しないからといって非公式というわけでは無い）。

公式インストーラーを利用をしない場合の方法でも幾つかの方法があるがここでは

1. Homebrew（Mac OS のパッケージ管理）のインストール
2. nodebrew（node.js のインストールとバージョン管理）のインストール
3. node.js の最新版をインストール
4. Angular CLI（Angularアプリのプロジェクト生成や実行などが行えるコマンドラインツール）のインストール

の流れで実施。  
因みに nodebrew を選択しているのは単純に既存他環境と合わせるという理由で選択。他の選択肢としては [ndenv](https://qiita.com/griffin3104/items/a8ae5b271bf9246eeadd) も良さそうな気がする。

## Homebrew のインストール
[公式サイト](https://brew.sh/index_ja)に行けば冒頭にターミナルにこれをコピペして実行してねと書かれているので以下のコマンドをターミナルにコピペして実行。

```
/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` が無い場合はテキストエディタ（プレーンテキストで）とかで作成。ファイルは不可視ファイルなので目視確認したい場合は[この記事](https://qiita.com/clutter/items/520efe83b48375048c9f)を参照すれば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。

<img width="350" alt="anglar_start.png" src="https://qiita-image-store.s3.amazonaws.com/0/322617/8628d9a3-8ed5-24ad-0deb-bf1502ba139a.png">

以上でひとまず Anglar が動く環境は出来ました。
[次は Atom で TypeScript の設定をしようと思います。](https://qiita.com/koronpo/items/a702b73f56d6be16e40a)