Windows機でAngularアプリのビルド環境を構築する(Node.js,npm,angularcliのインストール)

僕は会社のIT部門でPMをやっていて、Angularを用いたクロスプラットフォームのアプリの案件は僕以外はあまり深くは知らない状況です。

リフレッシュ休暇でエストニアに行くにあたり、10日間全く何もできまっしぇーん状態になれるほどハート強くないので、手持ちの安いWindows機にビルド環境を構築して持っていくことにしました。JSさえビルドできれば、Monacaにソースアップして、デバッグビルド作成できるようになるからね。

Windows機でAngularアプリのビルド環境を構築する(Node.js,npm,angularcliのインストール)、せっかく覚えたのでメモがてら残します。

目次

0.アプリビルド環境のバージョン

1.Node.jsのインストール

2.angularcliをnpmでインストールする

3.Githubのリポジトリをローカルにクローンする

4.必要なモジュールをnpm installする

5.npm run build

0.アプリビルド環境のバージョン

Node.js v6.9.4
npm v3.10.10
angularcli v1.4.1

1.Node.jsのインストール

Node.jsの必要なバージョンのダウンロードファイルを、下記URLから取得してインストールする

https://nodejs.org/ja/download/releases/

Windowsキー → 「powershell」 と入力してEnterしPowerShellを起動し、Node.jsのバージョン確認

node -v

npmも一緒にインストールされているので、バージョン確認

npm -v

両方とも、指定のバージョンがインストールできていれば完了

2.angularcliをnpmでインストールする

npmというのは、Node.jsで使うパッケージ(便利なツールと思えばいい)の管理アプリケーション。

npm install -g @angular/cli@1.4.1

インストール後、以下コマンドでバージョン確認をする

ng --version

3.Githubのリポジトリをローカルにクローンする

TortoiseGitを使ってもいいし、PowerShellでcd Desktopとかして、そこでgit cloneしても良い

PowerShellでやる場合はnpmでgitをインストールする

npm install -g git

クローンしたいリポジトリを開き、Clone or Downloadのボタンから出てくるURLをコピーする

PowerShellでgit cloneする

git clone URL

ログインID(メールアドレス)とパスワードを聞かれるので入力してEnter押して進む

cloneができたら、作ったフォルダへ移動する

4.必要なモジュールをnpm installする

Macのnode_modulesコピっても、Windowsでは動かない(ビルド時にエラーとなる)。

なのでMacのnode_modulesに入っているパッケージを、ひとつひとつnpm install@バージョン指定 の形式でインストールしていく。

Mac上でアプリのGitリポジトリのフォルダを開き、以下のコマンドを入力してEnter

npm list --depth=0

これでnode_modulesの中身のバージョンが一覧で表示される。

それを一つ一つ、インストールしていく

npm install -g 「一覧に出てきたものをコピペ」
例：npm install -g @angular/animations@4.4.6

注意：npm install だけ(パッケージ・バージョン番号を指定しない)をやるとMac、開発会社の使っているのとは違うバージョンがインストールされてしまうため実施しないこと。

インストールが終わったら、Macにインストールされているものと一致しているか確認する

npm list --depth=0

5.npm run build

アプリのビルドのコマンドを実行する。

npm run build

または

ng build --prod

以上です。これでどこ行っても仕事できるね！