Belajar Angular - Tooling Modern & Build Automation

#Pendahuluan

Kode yang baik butuh proses yang baik. Otomasi build, lint, test, dan rilis membuat tim fokus pada produk, bukan pada pekerjaan tangan yang berulang.

Episode 19 membahas Angular CLI, builders, dan custom schematics, build pipeline dengan linting dan formatting, continuous integration untuk aplikasi Angular, serta reproducible builds dan release management. Kalian akan melihat bagaimana project Angular diproduksi dari commit hingga rilis.

#Angular CLI, Builders, dan Custom Schematics

#Builder: Mesin di Balik Perintah

Perintah seperti ng build dan ng serve adalah pintu ke builders — package yang melakukan pekerjaan sebenarnya. Builder dijelaskan di angular.json:

{
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "outputPath": "dist/toko-online",
    "index": "src/index.html",
    "main": "src/main.ts"
  }
}

@angular-devkit/build-angular:application adalah builder resmi untuk aplikasi standalone modern. Kalian bisa memakai builder dari ekosistem untuk kebutuhan khusus, atau menulis builder sendiri.

#Custom Schematics

Schematic adalah generator kode yang dijalankan CLI. ng generate component secara internal memanggil schematic. Tim bisa membuat schematic custom agar setiap file yang di-generate mengikuti standar tim — misalnya komponen yang otomatis menyertakan test, OnPush, dan format tertentu.

ng generate @myorg/schematics:module-auth --dry-run

--dry-run menampilkan file yang akan dibuat tanpa benar-benar membuatnya. Schematic custom menyebarkan praktik tim secara otomatis — konsistensi tanpa mengandalkan ingatan.

#Build Pipeline, Linting, dan Formatting

#Script di package.json

Standarisasi perintah lewat script di package.json:

{
  "scripts": {
    "build": "ng build --configuration=production",
    "lint": "ng lint",
    "test": "ng test --watch=false --browsers=ChromeHeadless",
    "format": "prettier --write ."
  }
}

Dengan script ini, semua orang dan semua sistem memakai perintah yang sama. test memakai ChromeHeadless agar bisa berjalan di CI tanpa browser grafis.

#Lint dan Format di CI

Jalankan lint dan format sebelum build di CI agar masalah terdeteksi lebih awal:

npm run lint
npx prettier --check .
npm run test
npm run build

prettier --check . memverifikasi format tanpa menulis — CI hanya lolos jika format konsisten. Lint, format, test, lalu build: itulah quality gate standar sebelum merge.

#Continuous Integration untuk Angular Apps

#Workflow GitHub Actions

GitHub Actions menjalankan seluruh quality gate untuk setiap pull request:

name: CI Angular
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

npm ci menginstall dependency sesuai lockfile secara deterministik. Cache Node mempercepat instalasi. Workflow ini memberi sinyal cepat di setiap PR: hijau artinya aman untuk merge, merah artinya ada yang perlu diperbaiki.

#Menyimpan Artefak

Setelah build, simpan hasilnya sebagai artefak agar bisa di-deploy atau dianalisis:

- uses: actions/upload-artifact@v4
  with:
    name: dist
    path: dist/toko-online

upload-artifact menyimpan folder dist sehingga job berikutnya — misalnya deployment — bisa memakai artefak yang sama. Ini juga menjaga reproducibility: hasil build tidak bergantung pada mesin developer.

#Reproducible Builds dan Release Management

#Kunci Reproducibility

Build yang reproducible selalu menghasilkan output yang sama dari input yang sama. Kuncinya: npm ci dari lockfile, pin versi Node dengan .nvmrc atau engines, dan hindari kode yang bergantung pada waktu atau environment.

{
  "engines": {
    "node": ">=20.19.0 <23"
  }
}

Deklarasi engines memastikan semua orang dan CI memakai rentang Node yang sama. Versi yang berbeda bisa menghasilkan bundle yang berbeda — dan bug yang hanya muncul di mesin tertentu.

#Semantic Release

Manajemen rilis otomatis memakai semantic-release: versioning mengikuti conventional commits, changelog di-generate otomatis, dan versi diterbitkan sesuai jenis perubahan.

npx semantic-release

npx semantic-release menganalisis commit sejak rilis terakhir, menentukan versi berikutnya, memperbarui changelog, dan membuat tag serta release di GitHub. Praktik ini menghilangkan keputusan versi manual dan memastikan setiap perubahan terdokumentasi.

#Penutup

Inti yang harus dibawa pulang:

• Builder di angular.json adalah mesin di balik perintah CLI.
• Custom schematics menstandardisasi kode yang di-generate tim.
• Standardisasi script build, lint, test, dan format di package.json.
• CI menjalankan quality gate di setiap pull request.
• npm ci dan pin versi Node membuat build reproducible.
• Semantic release mengotomatisasi versioning dan changelog.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting — opsi deployment di Firebase, Vercel, Netlify, dan AWS, server-side rendering dengan Angular Universal, static site generation dan prerendering, serta praktik terbaik deployment production.