Angular CLI - Cara Membuat Proyek Angular Baru di Linux
Angular adalah kerangka pengembangan aplikasi front-end sumber terbuka, populer, dan sangat dapat diperluas, digunakan untuk membangun aplikasi seluler dan web menggunakan TypeScript/JavaScript dan bahasa umum lainnya.
Angular adalah istilah umum untuk semua versi Angular yang muncul setelah AngularJS (atau Angular versi 1.0) termasuk Angular 2 , dan Sudut 4.
Angular sangat cocok untuk membangun aplikasi skala kecil hingga besar dari awal. Salah satu komponen utama platform Angular untuk membantu pengembangan aplikasi adalah utilitas Angular CLI – ini adalah alat baris perintah yang sederhana dan mudah digunakan untuk membuat , mengelola, membangun, dan menguji aplikasi Angular.
Pada artikel ini, kami akan menjelaskan cara menginstal alat baris perintah Angular pada sistem Linux dan mempelajari beberapa contoh dasar alat ini.
Menginstal Node.js di Linux
Untuk menginstal Angular CLI, Anda harus menginstal Node.js dan NPM versi terbaru di sistem Linux Anda.
Instal Node.js di Ubuntu
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
Instal Node.js di Debian
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs
Instal Node.js di RHEL, CentOS, Fedora, Rocky & Alma Linux
------------- For Node.js v19.x -------------
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
Selain itu, untuk mengkompilasi dan menginstal add-on asli dari NPM Anda mungkin perlu menginstal alat pengembangan pada sistem Anda sebagai berikut.
sudo apt install -y build-essential [On Debian/Ubuntu]
sudo yum install gcc-c++ make [On RHEL Systems]
Menginstal Angular CLI di Linux
Setelah Anda menginstal Node.js dan NPM, seperti yang ditunjukkan di atas, Anda dapat menginstal Angular CLI menggunakan npm package manager sebagai berikut (tanda -g berarti memasang alat di seluruh sistem agar dapat digunakan oleh semua pengguna sistem).
npm install -g @angular/cli
OR
sudo npm install -g @angular/cli
Anda dapat meluncurkan Angular CLI menggunakan ng yang dapat dieksekusi yang sekarang harus diinstal pada sistem Anda. Jalankan perintah berikut untuk memeriksa versi Angular CLI yang diinstal.
ng version
OR
ng --version
Membuat Proyek Angular Menggunakan Angular CLI
Di bagian ini, kami akan menunjukkan cara membuat, membangun, dan menyajikan proyek Angular dasar yang baru. Pertama, pindah ke direktori webroot di server Anda, lalu inisialisasi aplikasi Angular baru sebagai berikut (ingat untuk mengikuti petunjuknya):
cd /var/www/html/
ng new tecmint-app #as root
OR
sudo ng new tecmint-app #non-root user
Selanjutnya pindah ke direktori aplikasi yang baru saja dibuat, dan sajikan aplikasi seperti gambar.
cd tecmint-app
ls #list project files
ng serve
Sebelum Anda dapat mengakses aplikasi baru dari browser web, jika Anda menjalankan layanan firewall, Anda perlu membuka port 4200 di konfigurasi firewall seperti yang ditunjukkan.
---------- On Firewalld ----------
firewall-cmd --permanent --zone=public --add-port=4200/tcp
firewall-cmd --reload
---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload
Sekarang Anda dapat membuka browser web dan menavigasi menggunakan alamat berikut untuk melihat aplikasi baru berjalan seperti yang ditunjukkan pada tangkapan layar berikut.
http://localhost:4200/
or
http://SERVER_IP:4200
Catatan: Jika Anda menggunakan perintah ng serve untuk membangun aplikasi dan menyajikannya secara lokal, seperti yang ditunjukkan di atas, server secara otomatis membangun kembali aplikasi tersebut dan memuat ulang halaman web saat Anda mengubah salah satu file sumber.
Untuk informasi selengkapnya mengenai alat ng, jalankan perintah berikut.
ng help
Beranda CLI Angular: https://angular.io/cli
Pada artikel ini, kami telah menunjukkan cara menginstal Angular CLI di berbagai distribusi Linux. Kami juga membahas cara membangun, mengkompilasi, dan menyajikan aplikasi dasar Angular di server pengembangan. Untuk pertanyaan atau pemikiran apa pun yang ingin Anda sampaikan kepada kami, gunakan formulir umpan balik di bawah.