ngコマンドが動く環境構築
某サイトを修正するにあたって、「ng serve」 など、ngコマンドを使う必要があったのですが、環境構築で少し苦戦しました。ngコマンドが何物なのかもよくわかっておりませんでした。
その概要と環境構築の手順を書き留めておきます。
ngコマンドとは
Angular CLIで使えるようになるコマンドです。
ng new、ng serve、ng build などがあります。
手順
①npm install -g @angular/cli
npm installでAngularのコマンドラインツールをインストールします。
$ npm install -g @angular/cli
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/ng -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/@angular/cli/bin/ng
> fsevents@1.2.8 install /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/@angular/cli/node_modules/fsevents
> node install
node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" is installed via remote
+ @angular/cli@7.3.8
added 363 packages from 197 contributors in 14.724s
╭───────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.4.1 → 6.9.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.9.0 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
②npm install --save-dev @angular-devkit/build-angular
"@angular-devkit/build-angular"というモジュールをインストールします。
$ npm install --save-dev @angular-devkit/build-angular
> fsevents@1.2.7 install /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/fsevents
> node install
node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" is installed via remote
> uws@9.148.0 install /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0
> wd@1.11.1 install /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/wd
> node scripts/build-browser-scripts
> node-sass@4.11.0 install /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-67_binding.node
Download complete ⸩ ⠋ :
Binary saved to /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/node-sass/vendor/darwin-x64-67/binding.node
Caching binary to /Users/hayashiyoshino/.npm/node-sass/4.11.0/darwin-x64-67_binding.node
> ngrok@3.1.1 postinstall /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/ngrok
> node ./postinstall.js
ngrok - downloading binary https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
ngrok - downloading progress: 14913520/14913520
ngrok - binary downloaded to /Users/hayashiyoshino/.ngrok/aHR0cHM6Ly9iaW4uZXF1aW5veC5pby9jLzRWbUR6QTdpYUhiL25ncm9rLXN0YWJsZS1kYXJ3aW4tYW1kNjQuemlw.zip
ngrok - unpacking binary
ngrok - binary unpacked to /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/ngrok/bin/ngrok
> node-sass@4.11.0 postinstall /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/hayashiyoshino/projects/tama/tamarubykaigi01/node_modules/node-sass/vendor/darwin-x64-67/binding.node
Testing binary
Binary is fine
+ @angular-devkit/build-angular@0.13.8
added 1436 packages from 1636 contributors and audited 50418 packages in 76.049s
found 4 vulnerabilities (2 low, 2 high)
run `npm audit fix` to fix them, or `npm audit` for details
③ng serve
これでng serveで動くようになります。
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-04-28T05:53:27.600Z
Hash: 68661388f029a8b87102
Time: 9763ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 80.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 69.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 429 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.52 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.
Angular、個人でも触ってみたい気持ちになってきました！！
