みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はAngularCLIをAngular17へアップデートする方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- AngularCLIのバージョンアップができる
Macユーザ向けだよ!
AngularCLIをアップデートしよう!

Angular17を動かすためにはNode.jsのバージョンアップも必要となるケースが多いので
今回はNode.jsやバージョン管理ツールのアップデートも併せて行います。
アップデート前のバージョン

この環境からアップデートするよ!
アップデートの流れ
Homebrewの設定&アップデート
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
export PATH="$PATH:/opt/homebrew/bin/"
brew update
Macのバージョン管理ツールだよ!
NodeBrewのアップデート
brew upgrade nodebrew
Node.jsのバージョン管理ツールだよ!
Angular17に対応したNode.jsのインストール
nodebrew install-binary v20.10.0
20.10.0は2024/01/13時点の最新安定版だよ!
AngularCLIのアップデート
npm i -g @angular/cli
これでAngularCLIのバージョンアップが完了したよ!
うまくいかない場合は↓のコマンドを実行してね!
うまくいかない場合は↓のコマンドを実行してね!
npm uninstall -g @angular/cli
npm cache verify
npm uninstall -g @angular/cli
npm i -g @angular/cli
バージョン確認
バージョン確認コマンド
ng v

少しバージョンが異なる可能性がありますが、
Angular CLI:17.xx.xx となっていれば成功だよ!
Angular CLI:17.xx.xx となっていれば成功だよ!
新規Angularアプリの作成をしよう!

新規Angularアプリ作成コマンド
ng new my-app
cd my-app
ng serve -o

ng new my-app
を実行した際にcss設定等の質問がいくつか続きますが、そのままエンターでOKだよ!
を実行した際にcss設定等の質問がいくつか続きますが、そのままエンターでOKだよ!

暫く待つとこのようなページが表示されます。
※バージョンによりこの表示は異なります。
これでAngular17の環境が出来たよ!

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈