Menguasai Angular CLI: Konfigurasi Lanjutan untuk Workspace Multi-Project

Dalam pengembangan aplikasi frontend skala besar, kebutuhan modularisasi, pemisahan domain bisnis, dan manajemen source code yang efisien menjadi hal yang sangat penting. Angular CLI menyediakan kemampuan powerful berupa workspace multi-project, yaitu satu struktur repository yang dapat menampung banyak aplikasi (apps) dan pustaka (libraries) di bawah satu konfigurasi terpadu. Pendekatan ini umum digunakan dalam pengembangan enterprise, monorepo architecture, white-label platform, dan ekosistem produk dengan banyak modul UI yang saling berbagi komponen.

Artikel ini membahas secara mendalam bagaimana membangun workspace multi-project menggunakan Angular CLI: dimulai dari konsep dasar, struktur file, konfigurasi angular.json, path alias, pembuatan library bersama, hingga pengelolaan build dan integrasi CI/CD. Tutorial ini disusun agar dapat menjadi referensi jangka panjang bagi tim frontend atau arsitek aplikasi.

1. Apa Itu Workspace Multi-Project dalam Angular?

Workspace multi-project adalah sebuah workspace Angular yang tidak hanya berisi satu aplikasi utama, tetapi dapat memuat beberapa aplikasi sekaligus seperti admin panel, client app, dashboard analitik, atau aplikasi white-label. Selain itu, workspace juga dapat berisi banyak library internal seperti UI components, utility helpers, state management module, dan sebagainya.

Semua aplikasi dan library tersebut dikelola melalui satu berkas konfigurasi utama bernama angular.json. Hal ini memungkinkan konsistensi konfigurasi, pengurangan duplikasi codebase, dan pengelolaan dependency yang lebih efisien.

2. Membuat Workspace Baru Tanpa Aplikasi Default

Untuk membuat workspace multi-project yang rapi, kita perlu membuat workspace kosong tanpa aplikasi bawaan. Perintah berikut digunakan agar Angular CLI hanya membuat folder workspace tanpa app default:

ng new enterprise-workspace --create-application=false

Output perintah di atas akan menghasilkan struktur folder minimal yang siap diisi aplikasi dan library baru. Ini sangat ideal untuk monorepo enterprise.

3. Memahami Struktur Workspace dan Konfigurasi angular.json

Setelah workspace dibuat, Angular CLI menghasilkan folder projects/ yang menampung semua aplikasi dan library. File angular.json akan memiliki struktur dasar yang berisi daftar project, konfigurasi build, test, serve, lint, outputPath, environment file, dan sebagainya.

{
  "projects": {
    "admin-app": {
      "root": "projects/admin-app/",
      "sourceRoot": "projects/admin-app/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/admin-app"
          }
        }
      }
    }
  }
}

Konfigurasi ini menentukan bagaimana aplikasi dibangun, lokasi aset, environment file yang digunakan, serta konfigurasi build spesifik per aplikasi.

4. Membuat Aplikasi dan Library dalam Workspace

Setelah workspace siap, aplikasi dapat dibuat dengan perintah:

ng generate application admin-app

Untuk library internal (misalnya untuk berbagi komponen UI):

ng generate library shared-ui

Library ini dapat di-import ke seluruh aplikasi dalam workspace tanpa perlu membuat package NPM terpisah.

5. Konfigurasi Path Mapping dan Alias Import

Agar import komponen lebih bersih, kita dapat mengonfigurasi path alias di tsconfig.base.json:

{
  "compilerOptions": {
    "paths": {
      "@shared/*": ["projects/shared-ui/src/lib/*"]
    }
  }
}

Sehingga import komponen dapat ditulis seperti ini:

import { ButtonComponent } from '@shared/components';

6. Mengatur Environment, Output Path, dan Build Variants

Setiap aplikasi dapat memiliki environment build berbeda seperti development, staging, dan production. Konfigurasi ini ditentukan di angular.json bagian architect.build.configurations. Misalnya:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true
  }
}

7. Penerapan CI/CD untuk Workspace Multi-Project

Dalam CI/CD, build dapat ditargetkan ke aplikasi tertentu saja tanpa mem-build seluruh project. Contoh workflow GitHub Actions:

- name: Build Admin App
  run: ng build admin-app --configuration production

Hal ini mempercepat pipeline dan mengurangi beban server CI.

8. Troubleshooting Umum

1. Error path alias tidak ditemukan — pastikan path di tsconfig.base.json benar. 2. Build gagal pada library — lakukan re-export semua komponen di public-api.ts. 3. Aplikasi tidak muncul saat `ng serve` — periksa configurasi serve.targets di angular.json. 4. Perubahan library tidak terbaca — jalankan `ng build shared-ui --watch` atau gunakan path alias.

9. Kesimpulan

Workspace multi-project Angular memberikan fleksibilitas besar dalam pengembangan aplikasi skala besar dengan struktur modular dan efisien. Dengan pengaturan Angular CLI yang tepat, konfigurasi angular.json yang rapih, integrasi path alias, dan pemanfaatan library internal, tim dapat membangun platform frontend yang scalable, maintainable, dan siap untuk enterprise production.

Muhammad Nadhif