Degananda.com -

Sudah lama rasannya kami tidak menggunakan angular untuk menyelsaikan project. Terahir versi angular yang kami gunakan adalah versi 4. Tepat pada 1 November kemarin angular telah merisi versi terbarunnya yakni versi 5.

Secara singkat, berikut ini adalah bagian yang dilakukan penyempurnaan baik dari sisi fitur ataupun bug pada angular versi 5 :

1. Form
2. Animasi
3. Router
4. ServiceWroker, sangat bermanfaat bagi anda yang sedang mengembangkan PWA(Progressive web apps).
5. PlatformServer, kemampuan SSR(Server side rendering) semakin bagus.

Sebenarnya tidak ada cara khusus untuk melakukan update atau upgrade angular ke versi 5 ataupun versi tertentu. Cara ini dapat kita gunakan untuk mengupdate ke angular versi berapapun selama tidak ada perubahan major yang mengharuskan perubahan mengenai mekanisme update angular.

Cara update angular dan angular cli ke versi 5

---

Pertama pastikan bahwa anda telah memiliki angular cli yang terinstall di local machine anda. Jika belum punya maka anda tidak akan bisa melakukan update angular hhe. Untuk mengecek apakah angualr telah terinstall di local machine anda adalah dengan menggunakan perintah berikut ini

ng --version

jalankan perintah diatas pada terminal / commandline/ powershell (tergantung dari sistem operasi yang anda gunakan. Perintah diatas akan mengeluarkan informasi mengenai versi angular yang telah terinstall dilocalmachine anda.

Jika angular belum terinstall akan keluar warning berupa

~bash: ng: command not found

ini adalah versi angular yang saat ini sedang terinstall di local machine kami.

sekarang kita sedang menggunakan angular cli versi 1.2.7. Selanjutnya adalah dimana kita dapat mengetahui versi angular yang sedang digunakan ? versi angular tersebut terletak di package.json. Buka folder project angular anda yang dibuat dengan versi angular cli tersebut. Jika tidak ingat cukup buat project baru

ng new project

setelah anda berada didalam folder project angular tersebut cari file bernama package.json dan bukalah dengan menggunakan terminal ataupun texteditor. Kami lebih suka dengan menggunakan terminal karena membutuhkan effort yang lebih kecil, cukup ketikan perintah berikut ini

nano package.json

maka pada terminal akan muncul isi dari file package.json tersebut

lalu lihat pada line @angular/core. Disini kita tahu bahwa versi angular yang kita gunakan adalah versi 4. Oke setelah kita mengetahui :

1. Versi angular CLI
2. Versi angular

Maka kita siap untuk melakukan update angular secara global maupun secara project. Pertanyaan selanjutnya adalah mana yang butuh untuk diupdate angular cli/angular secara global ataukah angular cli/angular yang berada dilocal project?

Update secara global

1. uninstall secara global angular-cli anda dengan menggunakan perintah berikut ini

npm uninstall -g @angular/cli

perintah diatas akan melakukan install @angular-cli secara global. ini artinnya anda tidak akan bisa menggunakan perintah ng di direktori manapun.

Anda membutuhkan root permission untuk menggunakan parameter -g. Pastikan menuliskan sudo jika anda belum memiliki hak akses root. Jika pada windows pastikan menggunakan power shell

2. Hapus cache NPM

cache memang sangat berguna untuk kebutuhan performa namun npm cache dapat membuat proses installasi package baru menjadi bermasalah. Oleh karena itu kita membutuhkan membersihkan cache npm dengan perintah berikut ini

npm cache clean

perintah diatas tidak membutuhkan permission super user atau root.

3. Install angular cli kembali secara global

Dengan melakukan install kembali angular cli maka secara otomatis versi angular cli ataupun angular yang akan digunakan diproject selanjutnya akan mengacu pada versi terahir atau latest. Sebelum menjalankan perintah install angular-cli jangan lupa melakukan cache clean pada langkah kedua untuk memastikan update/upgrade angular berhasil dengan baik.

npm install -g @angular/cli@latest

Jangan lupa perintah -g pada npm harus menggunakan root privilages. Gunakan sudo atau powershell pada windows.

DONE!

Kita telah berhasil melakukan update angular cli dan angular secara global. Versi terahir angular akan digunakan pada project baru. lalu bagaimana jika kita ingin melakukan update pada local package ?

Update pada local package.

Terdapat tiga langkah yakni

1. Hapus folder node_modules & dist

langkah ini diperuntukan agar kita dapat melakukan upgrade seluruh package yang ada sesuai dengan depdencynya. Perintah yang digunakan adalah sebagai berikut ini

rm -rf node_modules dist

dist perlu dihapus karena menyimpan hasil build dari project angular yang kita miliki. hal ini penting untuk menghindari conflict.

2. Install angular

jalankan perintah berikut untuk install angular pada local package

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

namun ini bukan berarti angular/angular cli telah terinstall dengan versi paling ahir (latest). Kita harus melakukan install dengan menggunakan perintah

npm install.

3. DONE.

cek versi angular cli anda secara global dengan menggunakan perintah

ng --version

atau

ng -v

keduannya sama. Maka pada local machine kami menghasilkan detail sebagai berikut ini

untuk mengetahui versi angular cukup buat project dan buka package.json ataupun juga dapat menggunakan perintah yang sama (ng -v atau ng –version).

kita dapat lihat versi angular core saat ini adalah 5.0.0 Sehingga kita telah berhasil melakukan upgrade atau update angular ke versi 5.

Terimakasih

Semoga bermanfaat untuk kita semua.