Micro-frontend Angular
Module federation, arsitektur micro-frontend, dependensi bersama, strategi deployment, pola komunikasi
1Apa itu arsitektur micro-frontend dalam konteks Angular?
Apa itu arsitektur micro-frontend dalam konteks Angular?
Jawaban
Arsitektur micro-frontend memecah aplikasi Angular monolitik menjadi aplikasi independen yang lebih kecil, masing-masing dikembangkan dan di-deploy secara terpisah. Setiap micro-frontend dapat memiliki repository sendiri, pipeline CI/CD, dan tim dedicated. Module Federation dari Webpack 5 adalah teknologi yang direkomendasikan untuk mengimplementasikan arsitektur ini di Angular, memungkinkan loading dinamis kode dari aplikasi lain pada runtime.
2Apa peran Module Federation dalam arsitektur micro-frontend Angular?
Apa peran Module Federation dalam arsitektur micro-frontend Angular?
Jawaban
Module Federation memungkinkan berbagi kode antar aplikasi Angular pada runtime tanpa rebuild. Setiap micro-frontend mengekspos modul (remote) yang dapat dikonsumsi oleh aplikasi lain (host). Ini menghindari duplikasi kode, mengurangi ukuran bundle, dan memungkinkan deployment independen. Module Federation secara otomatis menangani loading asinkron, resolusi dependensi, dan berbagi library umum seperti Angular core.
3Apa perbedaan antara aplikasi host dan aplikasi remote dalam Module Federation?
Apa perbedaan antara aplikasi host dan aplikasi remote dalam Module Federation?
Jawaban
Aplikasi host mengonsumsi modul yang diekspos oleh remote. Ini mengonfigurasi remote di webpack.config-nya dan memuat modul mereka secara dinamis. Aplikasi remote mengekspos modul (component, service) untuk dikonsumsi oleh aplikasi lain. Aplikasi yang sama dapat menjadi host dan remote sekaligus. Host mengontrol shell aplikasi (header, navigation, layout) sementara remote menyediakan fitur bisnis.
Bagaimana mengkonfigurasi Module Federation dalam proyek Angular dengan @angular-architects/module-federation?
Mengapa penting mengkonfigurasi shared scope di Module Federation?
+17 pertanyaan wawancara
Topik wawancara Angular lainnya
Dasar-dasar TypeScript
TypeScript Lanjutan
Dasar-Dasar Angular
Komponen dan siklus hidup
Services & Dependency Injection
Organisasi Modul Angular
Angular CLI
Direktif dan Pipe
Routing dan Navigasi
Reactive Forms
Template-driven Forms
Dasar-Dasar RxJS
Operator RxJS
HttpClient & Panggilan API
Manajemen State Dasar
Change Detection
Angular Signals
Standalone Components
Unit Testing Angular
Pengujian End-to-End
Build dan optimasi
Dasar-dasar NgRx
NgRx Lanjutan
Arsitektur Angular
Optimisasi Performa
Keamanan dan Praktik Terbaik
Pola RxJS Lanjutan
Angular Universal & SSR
Kuasai Angular untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis