【入門】Angular QuickStart Step1 に沿って開発環境を構築してみる #JavaScript

を参考に環境を構築していきます。

昨日のUXify 2018 Japan 懇親会で
Angular はインストールにつまづく人が多いというお話を聞いたので
エラーが出たログも記載させていただきます。

Step 1. 開発環境の構築

Node.js® と npm のインストール

Node.js® と npm がインストールされていなければ、インストールしてください。
使用したマシンに入っていなかったので、インストール（詳細は下記）
Node.js® のインストール
バージョン確認結果は下記の通り

$ node -v
v8.11.1
$ npm -v
5.6.0

Angular CLI をインストール

Angular CLIをインストールしたところエラーが発生・・・orz

npm install -g @angular/cli
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxxxx/.npm/_logs/2018-04-28T07_00_37_138Z-debug.log

checkPermissions Missing write access to /usr/local/lib/node_modules

ということなので root権限で実行。

sudo npm install -g @angular/cli

ガリガリとたくさんインストール中・・・測っておけばよかった
でも、あまりにも長いので流れているログを確認したところ

gyp verb command install [ '8.11.1' ]
gyp verb install input version string "8.11.1"
gyp verb install installing version: 8.11.1
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version not already installed, continuing with install 8.11.1
gyp verb ensuring nodedir is created /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/.node-gyp/8.11.1
gyp WARN EACCES user "root" does not have permission to access the dev dir "/usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/.node-gyp/8.11.1"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/.node-gyp"

が、無限ループしていることに気づく・・・orz

https://github.com/sass/node-sass/issues/2006
を参考に

npm -g --unsafe-perm install node-sass
を試す

sudo npm -g --unsafe-perm install node-sass
Password:
/usr/local/bin/node-sass -> /usr/local/lib/node_modules/node-sass/bin/node-sass

> node-sass@4.9.0 install /usr/local/lib/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/darwin-x64-57_binding.node
Download complete  ⸩ ⠋ :
Binary saved to /usr/local/lib/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Caching binary to /Users/chisato/.npm/node-sass/4.9.0/darwin-x64-57_binding.node

> node-sass@4.9.0 postinstall /usr/local/lib/node_modules/node-sass
> node scripts/build.js

Binary found at /usr/local/lib/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine
+ node-sass@4.9.0
added 187 packages in 83.419s

今度は大丈夫だったみたい・・・

次回は Step 2. 新規プロジェクトを作成するです