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編)

npmのproxy設定

以下を参考に設定しましょう
参考：[Node.js] npm の proxy と registry 設定

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