Panduan Lengkap Angular CLI untuk Pemula
Angular CLI (Command Line Interface) adalah alat yang ampuh yang menyederhanakan pengembangan aplikasi Angular. CLI mengotomatiskan tugas-tugas umum, menghasilkan kode boilerplate, dan membantu Anda membangun, menguji, dan menerapkan aplikasi Anda. Panduan ini dirancang untuk pemula dan akan memandu Anda melalui dasar-dasar Angular CLI, memungkinkan Anda untuk memulai proyek Angular Anda dengan percaya diri.
Daftar Isi
- Pendahuluan: Apa itu Angular CLI?
- Instalasi Angular CLI
- Perintah Angular CLI Dasar
ng new: Membuat Proyek Barung serve: Menjalankan Aplikasing generate: Menghasilkan Komponen, Layanan, dll.ng build: Membangun Aplikasi untuk Produksing test: Menjalankan Tes Unitng e2e: Menjalankan Tes End-to-Endng lint: Menganalisis Kode dengan Lintingng update: Memperbarui Angular CLI dan Dependensi
- Struktur Proyek Angular CLI
- Konfigurasi Angular CLI (
angular.json) - Generasi Kode dengan Angular CLI
- Membangun dan Menerapkan Aplikasi Angular Anda
- Tips dan Trik Angular CLI
- Pemecahan Masalah Umum
- Sumber Daya Tambahan
- Kesimpulan
Pendahuluan: Apa itu Angular CLI?
Angular CLI adalah alat baris perintah yang memudahkan pengembangan aplikasi Angular. CLI menyediakan perintah untuk:
- Membuat proyek baru
- Menghasilkan kode (komponen, layanan, modul, dll.)
- Membangun dan mengoptimalkan aplikasi Anda
- Menjalankan pengujian
- Menerapkan aplikasi Anda
Dengan menggunakan Angular CLI, Anda dapat fokus pada penulisan kode aplikasi Anda daripada mengkhawatirkan konfigurasi dan tugas-tugas manual lainnya.
Instalasi Angular CLI
Sebelum Anda dapat menggunakan Angular CLI, Anda harus menginstalnya secara global di sistem Anda. Anda memerlukan Node.js dan npm (Node Package Manager) yang terinstal terlebih dahulu. Jika Anda belum memilikinya, unduh dan instal dari situs web Node.js.
Setelah Node.js dan npm terinstal, Anda dapat menginstal Angular CLI menggunakan perintah berikut:
npm install -g @angular/cliPerintah ini menginstal Angular CLI secara global, sehingga Anda dapat menggunakannya dari direktori mana pun di sistem Anda.
Setelah instalasi selesai, Anda dapat memverifikasi instalasi dengan menjalankan perintah berikut:
ng --versionPerintah ini akan menampilkan versi Angular CLI yang terinstal, serta versi Angular, Node.js, dan OS yang Anda gunakan.
Perintah Angular CLI Dasar
Angular CLI menyediakan berbagai perintah untuk membantu Anda dengan pengembangan aplikasi Angular Anda. Beberapa perintah yang paling umum digunakan adalah:
ng new: Membuat Proyek Baru
Perintah ng new digunakan untuk membuat proyek Angular baru. Perintah ini akan membuat direktori baru dengan semua file dan folder yang diperlukan untuk aplikasi Angular. Sintaksnya adalah:
ng new <nama-proyek>Misalnya, untuk membuat proyek baru bernama “my-app”, Anda akan menjalankan perintah berikut:
ng new my-appCLI akan menanyakan beberapa pertanyaan kepada Anda, seperti apakah Anda ingin menambahkan Angular routing dan gaya lembaran mana yang ingin Anda gunakan (CSS, SCSS, LESS, dll.). Pilih opsi yang sesuai dengan kebutuhan Anda.
Setelah proyek dibuat, Anda dapat menavigasi ke direktori proyek:
cd my-appng serve: Menjalankan Aplikasi
Perintah ng serve digunakan untuk membangun dan menjalankan aplikasi Anda secara lokal. Perintah ini akan memulai server pengembangan yang akan secara otomatis memuat ulang aplikasi Anda saat Anda membuat perubahan pada kode Anda. Sintaksnya adalah:
ng serveSecara default, aplikasi akan berjalan di http://localhost:4200/. Anda dapat mengubah port dengan menggunakan opsi --port:
ng serve --port 4300Untuk secara otomatis membuka aplikasi di browser Anda, gunakan opsi --open (atau -o):
ng serve --openng generate: Menghasilkan Komponen, Layanan, dll.
Perintah ng generate (atau ng g) digunakan untuk menghasilkan berbagai jenis kode, seperti komponen, layanan, modul, dan lainnya. Perintah ini mengotomatiskan pembuatan file boilerplate dan membantu Anda mempertahankan struktur proyek yang konsisten. Sintaksnya adalah:
ng generate <skema> <nama>Di mana <skema> adalah jenis kode yang ingin Anda hasilkan (misalnya, component, service, module) dan <nama> adalah nama kode tersebut.
Misalnya, untuk menghasilkan komponen bernama “my-component”, Anda akan menjalankan perintah berikut:
ng generate component my-componentIni akan membuat direktori baru bernama “my-component” di bawah direktori src/app, dengan file-file berikut:
my-component.component.ts(file kelas komponen)my-component.component.html(file templat HTML)my-component.component.css(file gaya CSS)my-component.component.spec.ts(file pengujian unit)
Angular CLI mendukung banyak skema. Berikut adalah beberapa yang paling umum:
component: Menghasilkan komponen.service: Menghasilkan layanan.module: Menghasilkan modul.pipe: Menghasilkan pipe.directive: Menghasilkan directive.class: Menghasilkan class.interface: Menghasilkan interface.enum: Menghasilkan enum.
ng build: Membangun Aplikasi untuk Produksi
Perintah ng build digunakan untuk membangun aplikasi Anda untuk produksi. Perintah ini akan mengoptimalkan kode Anda, menggabungkan file, dan menghasilkan folder dist yang berisi file-file yang dapat Anda sebarkan ke server web. Sintaksnya adalah:
ng buildUntuk membangun aplikasi dalam mode produksi (dengan optimasi dan minifikasi), gunakan opsi --prod:
ng build --prodAnda dapat menentukan basis URL aplikasi dengan opsi --base-href. Ini penting ketika Anda menerapkan aplikasi ke subpath di domain Anda:
ng build --prod --base-href=/my-app/ng test: Menjalankan Tes Unit
Perintah ng test digunakan untuk menjalankan tes unit aplikasi Anda. Perintah ini akan menggunakan Karma test runner untuk menjalankan tes yang didefinisikan dalam file *.spec.ts Anda. Sintaksnya adalah:
ng testPerintah ini akan membuka browser dan menjalankan tes Anda. Setiap kali Anda membuat perubahan pada kode Anda, tes akan berjalan secara otomatis.
ng e2e: Menjalankan Tes End-to-End
Perintah ng e2e digunakan untuk menjalankan tes end-to-end (E2E) aplikasi Anda. Tes E2E menguji aplikasi Anda dari perspektif pengguna, berinteraksi dengan UI dan memverifikasi bahwa semuanya berfungsi seperti yang diharapkan. Perintah ini menggunakan Protractor sebagai framework tes E2E. Sintaksnya adalah:
ng e2ePastikan Anda telah mengkonfigurasi Protractor dengan benar sebelum menjalankan perintah ini. Biasanya, CLI sudah mengkonfigurasi Protractor saat Anda membuat proyek baru.
ng lint: Menganalisis Kode dengan Linting
Perintah ng lint digunakan untuk menganalisis kode Anda dengan linting. Linting membantu Anda mengidentifikasi masalah potensial dalam kode Anda, seperti kesalahan gaya, masalah performa, dan kesalahan potensial. Angular CLI menggunakan TSLint secara default. Sintaksnya adalah:
ng lintAnda dapat mengkonfigurasi aturan linting di file tslint.json di root direktori proyek Anda.
ng update: Memperbarui Angular CLI dan Dependensi
Perintah ng update digunakan untuk memperbarui Angular CLI dan dependensi proyek Anda ke versi terbaru. Ini adalah cara yang bagus untuk tetap mengikuti pembaruan terbaru dan perbaikan bug. Sintaksnya adalah:
ng updateAnda juga dapat memperbarui hanya Angular CLI:
ng update @angular/cliAtau hanya Angular core:
ng update @angular/corePenting untuk menjalankan perintah ini secara berkala untuk memastikan Anda menggunakan versi terbaru dari semua dependensi Anda.
Struktur Proyek Angular CLI
Saat Anda membuat proyek Angular baru dengan Angular CLI, CLI akan membuat struktur direktori standar untuk Anda. Berikut adalah struktur proyek tipikal:
my-app/ ├── .editorconfig ├── .gitignore ├── angular.json ├── karma.conf.js ├── package.json ├── README.md ├── src/ │ ├── app/ │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── ... │ ├── assets/ │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── tsconfig.app.json ├── tsconfig.json ├── tslint.json └── ...
Berikut adalah penjelasan singkat tentang beberapa file dan direktori utama:
angular.json: File konfigurasi untuk proyek Angular CLI Anda. Ini berisi pengaturan untuk pembangunan, pengujian, dan penerapan aplikasi Anda.package.json: File yang berisi informasi tentang proyek Anda, termasuk dependensi dan skrip.src/: Direktori yang berisi kode sumber aplikasi Anda.src/app/: Direktori yang berisi modul akar aplikasi Anda dan komponen aplikasi Anda.src/assets/: Direktori yang berisi aset statis Anda, seperti gambar, font, dan file data.src/environments/: Direktori yang berisi file konfigurasi untuk lingkungan yang berbeda, seperti pengembangan dan produksi.src/index.html: File HTML utama untuk aplikasi Anda.src/main.ts: File yang mem-bootstrap modul akar aplikasi Anda.src/styles.css: File gaya global untuk aplikasi Anda.tsconfig.json: File konfigurasi untuk TypeScript compiler.tslint.json: File konfigurasi untuk linter TSLint.
Konfigurasi Angular CLI (angular.json)
File angular.json adalah pusat konfigurasi untuk proyek Angular CLI Anda. Ini berisi pengaturan untuk pembangunan, pengujian, dan penerapan aplikasi Anda. File ini dalam format JSON dan memungkinkan Anda untuk menyesuaikan berbagai aspek dari proses pembangunan.
Berikut adalah contoh bagian dari file angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
}
}
}
},
"defaultProject": "my-app"
}
Beberapa properti penting dalam file angular.json meliputi:
projects: Berisi konfigurasi untuk setiap proyek dalam ruang kerja. Biasanya, Anda hanya akan memiliki satu proyek.architect: Berisi konfigurasi untuk berbagai target pembangunan, sepertibuild,serve,test, danlint.options: Berisi opsi konfigurasi khusus untuk setiap target pembangunan.configurations: Berisi konfigurasi yang berbeda untuk target pembangunan yang berbeda, sepertiproductiondandevelopment.
Anda dapat memodifikasi file angular.json untuk menyesuaikan proses pembangunan untuk kebutuhan spesifik Anda. Misalnya, Anda dapat mengubah direktori keluaran, menambahkan aset tambahan, atau mengkonfigurasi optimasi yang berbeda untuk lingkungan produksi.
Generasi Kode dengan Angular CLI
Angular CLI menyediakan perintah ng generate (atau ng g) untuk menghasilkan berbagai jenis kode, seperti komponen, layanan, modul, dan lainnya. Ini membantu Anda mengotomatiskan proses pembuatan file boilerplate dan mempertahankan struktur proyek yang konsisten.
Komponen
Komponen adalah blok bangunan dasar aplikasi Angular. Komponen terdiri dari templat HTML, kelas TypeScript, dan gaya CSS. Untuk menghasilkan komponen, gunakan perintah:
ng generate component <nama-komponen>Misalnya:
ng generate component my-new-componentAnda dapat menggunakan opsi tambahan:
--inline-template: Membuat komponen dengan template inline.--inline-style: Membuat komponen dengan style inline.--skip-tests: Melewati pembuatan file pengujian.--module: Menambahkan komponen ke modul yang ditentukan.
Layanan
Layanan adalah kelas yang menyediakan fungsionalitas yang dapat digunakan kembali oleh komponen lain. Layanan biasanya digunakan untuk mengakses data, melakukan logika bisnis, atau berinteraksi dengan API. Untuk menghasilkan layanan, gunakan perintah:
ng generate service <nama-layanan>Misalnya:
ng generate service dataOpsi tambahan:
--skip-tests: Melewati pembuatan file pengujian.
Modul
Modul adalah cara untuk mengatur aplikasi Anda ke dalam unit fungsionalitas yang berbeda. Modul dapat berisi komponen, layanan, dan modul lainnya. Untuk menghasilkan modul, gunakan perintah:
ng generate module <nama-modul>Misalnya:
ng generate module adminOpsi tambahan:
--route: Membuat modul dengan konfigurasi routing.
Pipes
Pipes adalah cara untuk mentransformasikan data dalam template Anda. Pipes dapat digunakan untuk memformat tanggal, mengubah teks, atau melakukan operasi lain pada data. Untuk menghasilkan pipe, gunakan perintah:
ng generate pipe <nama-pipe>Misalnya:
ng generate pipe capitalizeOpsi tambahan:
--skip-tests: Melewati pembuatan file pengujian.
Directives
Directives adalah cara untuk memanipulasi DOM (Document Object Model) dalam template Anda. Directives dapat digunakan untuk mengubah tampilan elemen, menambahkan perilaku baru, atau membuat komponen khusus. Untuk menghasilkan directive, gunakan perintah:
ng generate directive <nama-directive>Misalnya:
ng generate directive highlightOpsi tambahan:
--skip-tests: Melewati pembuatan file pengujian.
Interfaces
Interfaces adalah cara untuk menentukan struktur data. Interfaces membantu Anda untuk menulis kode yang lebih jelas dan mudah dipelihara. Untuk menghasilkan interface, gunakan perintah:
ng generate interface <nama-interface>Misalnya:
ng generate interface productEnums
Enums adalah cara untuk menentukan set nilai bernama. Enums membantu Anda untuk menulis kode yang lebih mudah dibaca dan dipahami. Untuk menghasilkan enum, gunakan perintah:
ng generate enum <nama-enum>Misalnya:
ng generate enum statusMembangun dan Menerapkan Aplikasi Angular Anda
Setelah Anda mengembangkan aplikasi Angular Anda, Anda perlu membangunnya untuk produksi dan menerapkannya ke server web. Angular CLI menyediakan perintah yang mudah untuk melakukan ini.
Untuk membangun aplikasi Anda untuk produksi, gunakan perintah ng build dengan opsi --prod:
ng build --prodPerintah ini akan mengoptimalkan kode Anda, menggabungkan file, dan menghasilkan folder dist yang berisi file-file yang dapat Anda sebarkan ke server web.
Setelah Anda membangun aplikasi Anda, Anda dapat menerapkannya ke server web mana pun. Beberapa opsi umum meliputi:
Setiap penyedia hosting memiliki proses penerapan sendiri. Namun, secara umum, Anda akan perlu mengunggah konten dari folder dist ke server web Anda.
Beberapa penyedia hosting, seperti Firebase dan Netlify, menyediakan integrasi Angular CLI yang menyederhanakan proses penerapan. Anda dapat menggunakan perintah ng deploy untuk menerapkan aplikasi Anda langsung dari baris perintah.
Tips dan Trik Angular CLI
Berikut adalah beberapa tips dan trik untuk menggunakan Angular CLI secara efektif:
- Gunakan perintah
ng helpuntuk mempelajari lebih lanjut tentang perintah tertentu. Misalnya, untuk mempelajari lebih lanjut tentang perintahng generate, jalankanng help generate. - Gunakan opsi tab-completion untuk menyelesaikan perintah dan opsi. Ini dapat menghemat waktu dan mengurangi kesalahan.
- Konfigurasikan lingkungan yang berbeda untuk pengembangan dan produksi. Gunakan file
src/environments/environment.tsdansrc/environments/environment.prod.tsuntuk menyimpan konfigurasi yang berbeda untuk lingkungan yang berbeda. - Gunakan Angular CLI untuk membuat modul lazy-loaded. Modul lazy-loaded dapat meningkatkan performa aplikasi Anda dengan hanya memuat modul saat dibutuhkan.
- Gunakan Angular CLI untuk membuat components yang dapat digunakan kembali. Components yang dapat digunakan kembali dapat membantu Anda mengurangi duplikasi kode dan membuat aplikasi yang lebih mudah dipelihara.
- Selalu perbarui Angular CLI dan dependensi proyek Anda ke versi terbaru. Ini akan membantu Anda memastikan bahwa Anda menggunakan pembaruan terbaru dan perbaikan bug.
Pemecahan Masalah Umum
Berikut adalah beberapa masalah umum yang mungkin Anda temui saat menggunakan Angular CLI dan cara memecahkannya:
- “Command not found” error: Ini berarti bahwa Angular CLI tidak terinstal secara global atau tidak ada di PATH Anda. Pastikan Anda telah menginstal Angular CLI secara global menggunakan perintah
npm install -g @angular/clidan bahwa direktori instalasi npm ada di PATH Anda. - “Port already in use” error: Ini berarti bahwa port yang digunakan oleh server pengembangan (biasanya 4200) sudah digunakan oleh aplikasi lain. Anda dapat mengubah port dengan menggunakan opsi
--portsaat menjalankan perintahng serve. - “Module not found” error: Ini berarti bahwa aplikasi Anda tidak dapat menemukan modul yang dibutuhkan. Pastikan Anda telah menginstal semua dependensi yang diperlukan menggunakan perintah
npm installdan bahwa modul diimpor dengan benar. - Build errors: Periksa konsol untuk pesan kesalahan yang lebih spesifik. Kesalahan build sering disebabkan oleh kesalahan sintaks, tipe yang tidak cocok, atau konfigurasi yang salah.
Sumber Daya Tambahan
Berikut adalah beberapa sumber daya tambahan yang dapat membantu Anda mempelajari lebih lanjut tentang Angular CLI:
Kesimpulan
Angular CLI adalah alat yang ampuh yang dapat menyederhanakan pengembangan aplikasi Angular Anda. Dengan menggunakan Angular CLI, Anda dapat mengotomatiskan tugas-tugas umum, menghasilkan kode boilerplate, dan membangun, menguji, dan menerapkan aplikasi Anda dengan mudah. Panduan ini telah memberikan pengantar tentang dasar-dasar Angular CLI dan semoga ini membekali Anda dengan pengetahuan untuk memulai proyek Angular Anda dengan percaya diri. Teruslah berlatih dan bereksperimen untuk sepenuhnya memanfaatkan potensi Angular CLI!
“`
