Goalist Developers Blog

Angular CLIをアップデートしたメモ〜angular-cliから@angular/cliへ

こんにちは。イイオです。
この3月末からAngular CLIを使ってAngular2を触り始めた初心者です。

最近では新卒の技術研修の一環でAngularの環境構築サポートを担当しました。

自分で調べながらやってみてね〜と言ったもののあんまり説明不足でしたから
「angular cli 環境構築」でぐぐって上の方に出てくるブログのコマンドをそのまま使って
古い方ののangular-cliをインストールしてプロジェクト作成してしまう事態が起きました。

数ヶ月前の記事がもう使えないとか諸行無常の世界だ。

正式リリースの@angular/cliの方を使いたかったのでアップデートして
プロジェクトのパッケージを変更しました。以下はその際の説明メモです。
公式に書いてある以上のことはしてないです。

github.com

stories 1.0 update · angular/angular-cli Wiki · GitHub

Angular CLIをアップデートする

手順

  1. グローバルの古いangular-cliをアンインストールする
  2. グローバルで@angular/cliをインストールする
  3. ローカルの古いangular-cliを削除し、利用パッケージから外す
  4. ローカルのnode_modules(ローカルに落としたパッケージが入ってるフォルダ)を削除する
  5. ローカルで@angular/cliを利用パッケージに登録する
  6. ローカルの利用パッケージを新しく入れ直す

npm?ローカルとかグローバル?な方はこの辺りを見たら良い気がする

勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点) - Qiita

1. グローバルの古いangular-cliをアンインストールする

$ npm uninstall -g angular-cli

2. グローバルで@angular/cliをインストールする

$ npm cache clean
$ npm install -g @angular/cli@latest

3. ローカルの古いangular-cliを削除し、利用パッケージから外す

cd <プロジェクトフォルダ>
npm uninstall --save-dev angular-cli

4. ローカルのnode_modules(ローカルに落としたパッケージが入ってるフォルダ)を削除する

macなら

rm -rf node_modules dist

winなら

rmdir /S/Q node_modules dist

5. ローカルで@angular/cliを利用パッケージに登録する

npm install --save-dev @sangular/cli@latest

6. ローカルの利用パッケージを新しく入れ直す

npm install

ng -vでバージョンを確認してみたら

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.10.2
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.10

無事にアップデートできました。めでてえ〜
何も中身を作り込んでないのであまり問題もなく終わりました。

新卒なのにいきなりAngularをやるみなさんはがんばってくれ!