Apa itu MicroFrontend?

MicroFrontends adalah gaya arsitektur untuk membangun aplikasi web dengan memecahnya menjadi modul yang lebih kecil, independen, dan digabungkan secara longgar. Setiap modul, atau MicroFrontend, dikembangkan dan digunakan secara independen, dengan rangkaian dependensi, teknologi, dan timnya sendiri.

Menerapkan MicroFrontend di Angular 15 melibatkan penguraian aplikasi menjadi bagian-bagian yang lebih kecil yang dapat dikembangkan dan digunakan secara mandiri. Setiap MicroFrontend harus memiliki aplikasi Angular sendiri, dengan kumpulan komponen, layanan, dan modulnya sendiri.

Langkah-langkah kunci untuk mengimplementasikan MicroFrontend di Angular 15:

1. Pisahkan aplikasi menjadi bagian-bagian yang lebih kecil dan independen berdasarkan domain atau fungsionalitas bisnis.
2. Buat aplikasi Angular untuk setiap MicroFrontend, dengan kumpulan komponen, layanan, dan modulnya sendiri.
3. Tentukan kontrak API untuk komunikasi antara MicroFrontends. Ini bisa berupa RESTful API, WebSockets, atau peristiwa khusus.
4. Gunakan plugin federasi modul untuk memuat MicroFrontends secara dinamis ke dalam aplikasi utama saat runtime. Federasi modul adalah fitur di Webpack yang memungkinkan banyak aplikasi berbagi kode saat runtime.
5. Terapkan modul bersama yang berisi kode dan komponen umum yang dapat digunakan oleh banyak MicroFrontend.
6. Gunakan sistem manajemen status terpusat, seperti Redux atau NgRx, untuk mengelola status aplikasi di MicroFrontends.
7. Terapkan sistem desain UI yang konsisten di MicroFrontends untuk memastikan pengalaman pengguna yang kohesif.

MicroFrontends di Angular menggunakan Module Federation

Konfigurasi Aplikasi HOST

1. Membuat Aplikasi Host

ng new angular-mfe-example --create-application="false"

2. Buat aplikasi host (Aplikasi Utama)

Ini adalah Aplikasi Utama tempat kami mendapatkan semua aplikasi jarak jauh dan mengonfigurasi perutean untuknya.

ng g application host

4. Perbarui Rute untuk menambahkan jalur ke admin dan mengubah AppComponent

Tambahkan Rute ke app-routing.module.ts

Bersihkan app.component.html dan tambahkan kode di bawah ini

5. Jalankan aplikasi

ng serve host

Membuat Aplikasi dan Konfigurasi Jarak Jauh

1. Buat aplikasi jarak jauh 1 dan aplikasi jarak jauh 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Sekarang menambahkan Paket Federasi Modul ke tiga aplikasi

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002

6. Sekarang buka modul dari Aplikasi Jarak Jauh untuk membuka webpack.config.js di remoteapp1 dan remoteapp2

7. Tangkap modul Exposed di aplikasi host webpack.config.js

8.Sekarang konfigurasikan perutean di app.module.ts aplikasi host

9. Setelah Mengkonfigurasi rute Anda mendapatkan kesalahan seperti modul tidak ditemukan. Anda perlu membuat decl.d.ts di folder aplikasi host.

10. Kemudian jika Anda mendapatkan kesalahan di bawah ini di remoteapp1 dan remoteapp2 . lalu tambahkan home.module.ts di tsconfig (file).

11. Sekarang pesan remote dan ubah host app.component.ts seperti di bawah ini

12. Sekarang buka aplikasi host di browser dan uji.

Bekerja……

Tautan Repo :https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Terima kasih jika Anda ragu. tinggalkan pesan di komentar