Belajar Angular - Memulai Proyek Angular

#Pendahuluan

Semua fondasi sudah siap: environment terpasang, konsep arsitektur dipahami. Sekarang saatnya bagian yang paling menyenangkan — membuat proyek Angular pertama.

Episode 3 adalah panduan praktis menyeluruh: membuat aplikasi dengan ng new, membedah struktur folder dan file penting, menjalankan dev server dengan live reload, serta menyiapkan TypeScript strict, ESLint, dan Prettier. Setelah episode ini, kalian punya project nyata yang siap dipakai untuk semua praktik berikutnya.

#Membuat Aplikasi dengan ng new

Perintah utama untuk membuat project adalah ng new. Pada Angular versi 17 ke atas, project yang dihasilkan sudah memakai standalone components secara default.

ng new toko-online --style=scss --ssr=false
cd toko-online

Flag yang umum dipakai:

• --style=scss untuk memakai SCSS sebagai style language.
• --ssr=false untuk menonaktifkan server-side rendering di awal pembelajaran.
• --routing untuk langsung menambahkan router (opsional).
• --skip-tests jika tidak ingin file spec di-generate.

Proses ini akan menginstall dependencies via npm. Setelah selesai, kalian masuk ke folder project dan semua perintah Angular berikutnya dijalankan dari sana.

#Struktur Folder dan File Penting

#File Kunci di Level Root

• angular.json: konfigurasi workspace, target build, dan proyek.
• package.json: daftar dependencies dan script.
• tsconfig.json, tsconfig.app.json, tsconfig.spec.json: konfigurasi TypeScript.
• src/main.ts: titik masuk aplikasi yang mem-bootstrap komponen root.

#Struktur di Dalam src

tree src -L 2

Hasilnya akan menampilkan folder app berisi komponen root app.component.ts, template app.component.html, style app.component.scss, dan file app.config.ts. index.html adalah halaman host, sedangkan folder public atau assets dipakai untuk aset statis.

#Komponen Root dan Bootstrap

src/main.ts memanggil bootstrapApplication dengan komponen AppComponent:

main.ts default

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
 
bootstrapApplication(AppComponent);

Dengan standalone components, bootstrap cukup mementingkan satu komponen root — tidak perlu NgModule. Jika kalian butuh router atau HTTP client, tambahkan provider di app.config.ts lewat provideRouter dan provideHttpClient.

#Menjalankan Dev Server dan Live Reload

#ng serve

Dev server dijalankan dengan ng serve. Secara default server berjalan di port 4200 dengan live reload aktif — setiap perubahan file langsung tercermin di browser.

ng serve --open

Flag --open membuka browser otomatis. Untuk mengubah port atau host:

ng serve --port=4300 --host=0.0.0.0

ng serve --port=4300 berguna jika port 4200 sudah terpakai, sementara --host=0.0.0.0 membuat server bisa diakses dari perangkat lain di jaringan yang sama, misalnya untuk test di ponsel.

#Perintah Penting Lainnya

Selain ng serve, ada beberapa perintah yang akan dipakai terus:

• ng build: membangun aplikasi ke folder dist untuk production.
• ng generate: meng-generate component, service, pipe, dan lainnya.
• ng test: menjalankan unit test dengan Karma.
• ng lint: menjalankan ESLint.

ng build
ng generate component produk

#Konfigurasi TypeScript, Linting, dan Formatting

#TypeScript Strict Mode

Angular mengaktifkan strict mode secara default. Di tsconfig.json pastikan opsi seperti strict, noImplicitAny, dan strictNullChecks bernilai true. Mode ini membuat kalian menulis tipe secara eksplisit dan menghindari bug di runtime.

#ESLint dan Prettier

Angular CLI memakai ESLint untuk linting. Jika project dibuat tanpa linting, tambahkan lewat schematic:

ng add @angular-eslint/schematics
npm install -D prettier

Setelah itu jalankan ng lint untuk memeriksa kualitas kode dan npx prettier --write . untuk memformat seluruh file. Konsistensi format ini penting saat bekerja di tim karena menghindari konflik diff yang tidak perlu.

#Penutup

Inti yang harus dibawa pulang:

• ng new nama-project membuat project Angular standalone dengan CLI.
• File kunci: angular.json, package.json, tsconfig*.json, dan src/main.ts.
• ng serve menjalankan dev server di port 4200 dengan live reload.
• ng build memproduksi bundle production ke folder dist.
• TypeScript strict aktif secara default; manfaatkan untuk mencegah bug.
• ESLint dan Prettier menjaga kualitas dan konsistensi kode tim.

Di episode 4 selanjutnya kita akan membahas component dan template — membuat komponen, memakai interpolation dan berbagai bentuk data binding, template references, serta komunikasi antar komponen dengan @Input dan @Output. Semua praktik di project toko-online kalian akan dimulai dari sini.