Angular-CLIバージョンアップ手順
投稿日: 2018/05/31
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ライフを！
