Angular adalah kerangka aplikasi web sumber terbuka yang menggunakan JavaScript. Tidak seperti beberapa kerangka kerja atau bahasa pemrograman lainnya, Anda perlu menyiapkan variabel lingkungan di Windows agar kerangka kerja ini dapat berfungsi. Oleh karena itu, kita harus belajar caranya mengatur Angular di VS Code dan menulis kode demo, itulah yang akan kami lakukan.
Cara mengatur Angular di VS Code
Untuk mengatur Angular di VS Code di komputer Windows Anda, Anda perlu mengikuti langkah-langkah yang disebutkan di bawah ini.
- Instal Kode Visual Studio
- Siapkan NodeJS
- Siapkan Variabel Lingkungan
- Instal Sudut
Mari kita membicarakannya secara detail.
1] Instal Kode Visual Studio
Untuk memulai perjalanan coding kita di ranah Angular, kita perlu menginstal Visual Studio Code. Untuk melakukan hal yang sama, Anda harus pergi ke kode.visualstudio.com dan unduh aplikasi untuk lingkungan Anda. Setelah diunduh, buka Unduh folder, jalankan media instalasi, dan instal aplikasi.
windows 10 mail tidak menerima email
2]Siapkan NodeJS
Penting untuk diperhatikan bahwa meskipun Anda dapat menggunakan VSCode untuk mengedit Angular, Anda tidak dapat menjalankannya langsung di dalam editor. Angular sebenarnya dijalankan dalam NodeJS, yang merupakan lingkungan JavaScript yang merupakan bagian dari pengaturan pengembangan web lokal Anda. Dengan NodeJS, Anda dapat menjalankan Angular di host lokal Anda di browser web. Setiap kali Anda membuat perubahan pada kode Angular di VSCode, kode tersebut akan dimuat ulang secara otomatis di browser, yang dikenal sebagai 'hot reload'. Namun, karena Angular berjalan di NodeJS, Anda harus menginstal NodeJS terlebih dahulu. Anda dapat melakukannya dengan mengunjungi nodejs.org .
Saat memasang Node JS untuk menjalankan Angular, pilih lokasi yang mudah diingat, seperti jalur yang sederhana dan pendek. Ini akan berguna jika Anda perlu menggunakan NodeJS nanti. Jadi, daripada menginstal aplikasi di Program files, instal di D:\NodeJS, meskipun itu tidak masalah.
3] Siapkan variabel lingkungan
Selanjutnya, kita perlu menyiapkan variabel lingkungan untuk NodeJs sebelum melanjutkan dan menginstal Angular. Untuk melakukan hal yang sama, ikuti langkah-langkah berikut.
- Tekan Win + S, ketik “Variabel Lingkungan” lalu buka.
- Setelah selesai, Anda perlu menyalin lokasi NodeJS. Sekadar referensi, milik kami adalah D:\NodeJS.
- Klik pada Variabel Lingkungan.
- Sekarang, pilih Jalur di bagian Variabel Sistem dan klik Edit.
- Klik Baru, tempel lokasinya, dan klik Ok.
Dengan cara ini, Anda telah memasukkan variabel Lingkungan NodeJS. Untuk memeriksa apakah itu berfungsi, buka Prompt Perintah lalu lari simpul –versi. Jika ini memberi Anda versi, kami dapat menginstal Angular.
4] Instal Sudut
Setelah membuat lingkungan yang tepat dengan menginstal NodeJS, kita akan menginstal Angular. Ikuti langkah-langkah yang disebutkan di bawah ini untuk melakukan hal yang sama.
- Membuka Kode Visual Studio.
- Arahkan ke lokasi di mana Anda ingin membuat file Angular menggunakan perintah CD atau Ubah Direktori. Kami telah membuat direktori baru di drive D untuk membuat proyek, lihat tangkapan layar terlampir.
- Untuk menginstal Angular di folder tersebut, kita perlu menjalankan perintah berikut.
npm install -g @angular/cli
- Kemudian jalankan perintah berikut untuk membuat proyek baru.
ng new foldername
- Sekarang, masuk ke dalam folder itu menggunakan 'cd foldername' dan luncurkan server menggunakan dari melayani.
Semoga sekarang Anda dapat menjalankan Angular tanpa masalah apa pun.
Membaca: Cara menginstal JavaScript di VSCode ?
Perintah ini tidak tersedia saat menjalankan Angular CLI di luar ruang kerja
Ketika saya menjalankan perintah “ng serve” saya mendapatkan pesan kesalahan yang mengatakan perintah tersebut tidak tersedia. Banyak orang menduga bahwa Angular tidak terinstal di sistem mereka, padahal kenyataannya, satu-satunya masalah adalah Anda tidak berada di direktori yang benar. Untuk mengatasinya, cukup lakukan 'cd' pada direktori tempat proyek berada, bukan lokasi root melainkan lokasi proyek sebenarnya. Jadi, pada awalnya, ketika saya menjalankan perintah, saya berada di AngularProject, yang merupakan folder root saya, jadi tidak berhasil. Namun, ini berfungsi dengan lancar ketika saya mengubah direktori ke sampleFolder dan menjalankan perintah yang sama.
Solusi yang kami sarankan Anda lakukan adalah membuka File Explorer, pergi ke lokasi penyimpanan proyek Anda, klik kanan pada layar kosong, dan pilih Terminal > Prompt Perintah . Dan kemudian lari dari melayani.
Membaca: Cara mengunduh dan menginstal Java JDK di Windows ?
Bagaimana cara mengatur proyek Angular di Visual Studio Code?
Untuk menyiapkan proyek Angular, Anda harus menginstal NodeJS di komputer Anda terlebih dahulu. Setelah selesai, Anda perlu mengonfigurasi Variabel Lingkungan dan menginstal Angular menggunakan npm install -g @angular/cli memerintah. Sekarang, lanjutkan dan buat direktori baru menggunakan nama folder baru perintah, untuk mengetahui lebih lanjut, lihat langkah-langkah yang disebutkan sebelumnya.
Membaca: Cara mengkonfigurasi VS Code untuk Microsoft C++
software redaksi gratis
Bagaimana cara menghasilkan VSCode Sudut?
Angular File Generator adalah ekstensi praktis untuk Visual Studio Code yang memungkinkan Anda membuat file Angular hanya dengan beberapa klik. Itu dibangun di Angular CLI dan menggunakan skema yang sama dengan CLI. Selain itu, ia menyediakan opsi untuk menghasilkan file langsung dari terminal.
Baca juga: Cara menginstal Python di VS Code .
