Angular5開発環境構築 for Windows

Angular-CLIを利用してAngular5の開発環境を構築する手順

# Node.jsとか事前インストール
Node.jsとかnpmとかをインストールする。
既に入っている環境では飛ばしていい。

## nodistインストール
CLIでNode.jsとかnpmのバージョン管理をしてくれるツールです。Node.jsを直接インストールしてももちろんいいですが、複数プロジェクト抱えたりするとバージョンの切り替えがしたくなるので。
詳細は
https://github.com/marcelklehr/nodist
インストールは
https://github.com/marcelklehr/nodist/releases
からexeを落として実行

## Node.jsインストール
```
$ nodist dist
```
でインストール可能なNode.jsのバージョンを確認して

```
$ nodist add <version>
```
でインストールして

```
$ nodist ls
   6.12.0
  >7.2.0  (global: 7.2.1)
   9.2.0
```
みたいに現在有効なバージョンを確認。">"で有効なのが表示されるので、切り替えたい場合は


```
$ nodist <version>
```
で指定したバージョンが有効になる。

```
$ node -v
  <version>
```

## npmインストール
```
$ nodist npm match
```

有効なNode.jsに合ったバージョンのnpmをインストールしてくれる

```
$ npm -v
  <version>
```

# Angular開発環境構築
## Angular-CLIインストール
```
$ npm i -g @angular/cli
```
コマンド等詳細はこちらのwikiにあります。
https://github.com/angular/angular-cli/wiki

## Angularプロジェクトの作成
```
$ ng new hello-angular
```
でプロジェクトの雛形が作成されるので、

```
$ cd hello-angular
$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.5
Node: 6.12.0
OS: win32 x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.38
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.8
typescript: 2.4.2
webpack: 3.8.1
```
で、Angular-CLIのバージョンと作成されたプロジェクトのモジュールとかを確認できます。

```
$ ng serve
```
で、実行します。

```
$ ng serve --open
```
みたいに--openオプションつけるとブラウザを自動起動して画面表示してくれます。

## Angularプロジェクト雛形の中身
現在のAngular-CLI(1.5.x)でng newすると以下の構成が出来上がる

```
.
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── node_modules
│   ├── @angular
│   ├── @angular-cli
│   ├── @ngtools
│   │   └── webpack
│   省略
│ 
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.json
└── tslint.json
```

# 参考

## nodistのproxy設定
以下を参考に設定しましょう
[参考：[Node.js] Node.js の導入(Windows編)]
(https://qiita.com/ksh-fthr/items/fc8b015a066a36a40dc2#%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E3%81%AE%E8%A8%AD%E5%AE%9A20170828-%E8%BF%BD%E8%A8%98)

## npmのproxy設定
以下を参考に設定しましょう
[参考：[Node.js] npm の proxy と registry 設定](http://qiita.com/LightSpeedC/items/b273735e909bd381bcf1)

## webpackの設定確認

Angular-CLIで作成されたプロジェクトはwebpackが内包（隠蔽）されている。
webpackを直接修正する場合は下記コマンドで抽出ができる

```
$ ng eject
```
プロジェクトフォルダ直下にwebpack.config.jsが抽出される。

**注意!**
ng ejectすると内包されていたwebpackが抽出され、package.jsonのscriptsやdependenciesも書き換わるのでng serveでの起動もできなくなる（npm startで起動）。


## quickstartでのインストール手順

下記の様にAngular-CLIを使用せずquickstartを利用することもできるが、この手順で実施するとコンパイル環境がwebpackではなくSystemJSになる。好み次第かもしれないが、Angular-CLIがすごい便利なので使った方がいい。

```
$ git clone https://github.com/angular/quickstart.git quickstart
$ cd quickstart
$ npm install
$ npm start
```