Windows環境でangular/cliを使えるようにする

Windows環境でangular/cliを使えるようになるまで

Windows10に1からangular/cliを入れようとしたところ、いろいろと躓いたので
その備忘録を書いてみる。

2017/06/09
yarnに対応
node 8.1.0
yarn 0.24.6
angular/cli 1.1.1

0. 事前準備

なし。

一応まっさらに近いVMware上で確認をしながら書いています。
（Windows10 x64 バージョン1703 ビルド番号 15063.332 VMWareToolsのみインストール）

1. node.js

パッケージ管理とバージョン管理が出来るようにする。
まずchocolateyというwindows版のyumやapt-getに相当するものをインストールする。
PowerShellを管理者権限で開き以下のコマンドでポリシーの確認をする。

$ Get-ExecutionPolicy
Restricted

結果が「Restricted」となった場合は以下のコマンドで外部ツールをインストール出来るようにします。

$ Set-ExecutionPolicy Bypass
実行ポリシーの変更
実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
のヘルプ トピック (http://go.microsoft.com/fwlink/?LinkID=135170)
で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "N"): Y

これでchocolateyのインストールが出来るようになったので以下のコマンドでインストールを行います。

$ iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

次にnode.jsのバージョン管理ツールのnodistをインストールする。
$ cinst nodist -y
インストールが終わったらPowerShellを閉じて開きなおす。
開きなおして以下のコマンドを入れてnodistの初期設定をする。(2017/06/09現在)

$ nodist -v
0.8.8
$ nodist 8.1.0
8.1.0
$ nodist npm 5.0.3
5.0.3

以下確認

$ nodist
  (x64)
  7.2.1
> 8.1.0 (global: 8.1.0)
$ nodist npm
  4.0.5
> 5.0.3  (global: 5.0.3)

これでnode.jsの設定は終わりです。

1-1. npmの代わりにYARNを使う場合

angular/cliのデフォルトパッケージ管理ツールがnpmからYARNに変わったのでYARNの導入方法を書く。
chocolateyで以下のコマンドでYARNのインストールができる。
$ cinst yarn -y
インストールが終わったらPowerShellを開きなおしインストール確認を行う。

$ yarn -v
yarn install v0.24.6
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.93s.

2. python2.x.x, MSBuild

angular-cliではnode-gypを使うため2.x.x系のPythonとMSBuildが必要となる。
どちらとも自動でインストールしてくれるパッケージがあるのでそれを使う。
下記のコマンドで自動で設定まで完了します。

• YARN $ yarn global add windows-build-tools

• npm $ npm install --global windows-build-tools

以上でpythonとMSBuildの設定は終わりです。

※nodejsが64bit版の場合は以下の方法でpythonを64bit版にする。

下記から64bit版のpythonをダウンロードしインストーラに従い
インストールしてください。
https://www.python.org/ftp/python/2.7.13/python-2.7.13.amd64.msi
インストールが終わったら下記コマンドによりnpmのパスを変更してください。
$ npm config set python C:\Python27\ --global

3. angular/cli

angular/cliは必ずキャッシュをクリアしてからインストールする。

• YARN

$ yarn cache clean
$ yarn global add @angular/cli

• npm

$ npm --global cache clean
$ npm install --global @angular/cli

以下確認

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0
node: 8.1.0
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6-52b6692
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

これでangular/cliのインストールは完了です。