2018/05/31

Angular-CLIバージョンアップ手順

Angular 


Angular CLI のバージョンアップ方法をいつも忘れてしまう私。


Angularやってて何か得体のしれないエラーが起きたとき、ググってみると「Angular CLI のバージョンを上げてみなYO(英語)」というページにたどり着くんですよね。

別にバージョンアップのやり方を指に覚えさせる必要も感じられないので、メモしておきます。




はじめに

さくっとコピペがしたい人は、こちらをどうぞ。


  # バージョン確認
  ng --version

  # グローバル
  npm uninstall -g @angular/cli
  npm cache clean
  npm install -g @angular/cli@latest

  # プロジェクト
  npm uninstall --save-dev @angular/cli
  rm -rf node_modules/
  npm cache clean
  npm install --save-dev @angular/cli


以下はそれぞれのコマンドの解説をします。


Angularのバージョンを確認

作業前に、現在のバージョンを確認しておきましょう。

ng --versionで確認できます。


$ ng --version
  _                      _                 ____ _     ___
 / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
             |___/
@angular/cli: 1.4.9
node: 6.9.0
os: win32 x64
@angular/animations: 4.4.7
@angular/common: 4.4.7
@angular/compiler: 4.4.7
@angular/core: 4.4.7
@angular/forms: 4.4.7
@angular/http: 4.4.7
@angular/platform-browser: 4.4.7
@angular/platform-browser-dynamic: 4.4.7
@angular/router: 4.4.7
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.7
@angular/language-service: 4.4.7
typescript: 2.3.4

※参考までに。動かなかったときのメモなので、これに合わせる必要は全くありません。


Angular CLIアンインストール

グローバルインストールされている、Angular CLIをアンインストールします。

npm uninstall -g @angular/cliを実行します。

※angular-cliが出たばかりの頃は、angular-cliという名前でした。時が経ちすぎた人は注意しましょう。


プロジェクト内アンインストール

上記はグローバルインストール。プロジェクト側にもインストールされているでしょうから、そちらもアンインストールします。

package.json などの中を見て確認しましょう。


npm uninstall --save-dev @angular/cliを実行します。

もし上手くいかなかった場合、rm -rf node_modules/も試してみましょう。


キャッシュクリア

Angularでは、「キャッシュが残ってて中途半端にインストールされた」とか「グローバルインストールしていたものが中途半端に影響していた」とかざらにあります。

なので、キャッシュクリアするのをお忘れなきよう。

npm cache cleanを実行します。


最新のAngular CLIをインストール

最新バージョンをインストールするには、名前の後ろに「@latest」を付けましょう。

いざnpm install -g @angular/cli@latestを実行します。


ただ、できればバージョン指定でインストールするほうが好ましいです。

なぜかというと、依存関係にあるライブラリももれなくインストールしないと動かないことがまれにあるからです。

Angular CLI の場合、Node.js のバージョンアップまで必要になる可能性が高いです。

※メジャーバージョンアップをするなら、周辺ライブラリも全てバージョンアップしておくほうが無難ですね。

※マイナーバージョンアップなら、各自のご判断におまかせ。時間とも相談しましょう。


まとめ


  # バージョン確認
  ng --version

  # グローバル
  npm uninstall -g @angular/cli
  npm cache clean
  npm install -g @angular/cli@latest

  # プロジェクト
  npm uninstall --save-dev @angular/cli
  rm -rf node_modules/
  npm cache clean
  npm install --save-dev @angular/cli

では、良きAngularライフを!



このエントリーをはてなブックマークに追加     

profile
profile

洋ちゃん

@yo-chan

システムエンジニアをしています。二児の父です。

夢は天井から床までビッシリ並んだ本棚のある書斎を作ること!