Menerapkan MicroFrontends di Angular 15

Arsitektur MicroFrontend Sudut

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:

Pisahkan aplikasi menjadi bagian-bagian yang lebih kecil dan independen berdasarkan domain atau fungsionalitas bisnis.
Buat aplikasi Angular untuk setiap MicroFrontend, dengan kumpulan komponen, layanan, dan modulnya sendiri.
Tentukan kontrak API untuk komunikasi antara MicroFrontends. Ini bisa berupa RESTful API, WebSockets, atau peristiwa khusus.
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.
Terapkan modul bersama yang berisi kode dan komponen umum yang dapat digunakan oleh banyak MicroFrontend.
Gunakan sistem manajemen status terpusat, seperti Redux atau NgRx, untuk mengelola status aplikasi di MicroFrontends.
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

membuat komponen admin

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

Tambahkan Rute ke app-routing.module.ts

app-routing.module.ts

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

app.component.html

5. Jalankan aplikasi

ng serve host

Melayani Tuan Rumah di 4200 Pic

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

      
       adding home module and component to remoteapp1
      

      
       adding home module and component to remoteapp2

Konfigurasi Router Untuk Aplikasi Jarak Jauh

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

Setelah Menambahkan Modul Federartion

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

remoteapp1 di webpack.config.js

remoteapp2 webpack.config.js

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

host aplikasi 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.

decl.d.ts di folder host

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

kesalahan saat melayani aplikasi jarak jauh 1 dan 2

menambahkan home.modult.ts di tsconfig.app.json di kedua remote

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

app.component.html dari host

12. Sekarang buka aplikasi host di browser dan uji.

Demo Bekerja

Bekerja……

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

Terima kasih jika Anda ragu. tinggalkan pesan di komentar

Memutakhirkan aplikasi perusahaan ke Angular 16

Ini dia rasa sakitnya

Saya benar-benar dibeli oleh semua fitur Angular v16 baru, dimulai dengan sinyal, dan yang lainnya. Dan saya tidak dapat menahan keinginan untuk memutakhirkan salah satu aplikasi perusahaan hanya untuk melihat betapa sulitnya hal itu.

Mengapa beberapa pekerja lepas memalsukan hidup mereka

Saya baru-baru ini berada di Linkedin, jejaring sosial profesional terbesar di dunia, dan menemukan postingan dari desainer lepas yang saya ikuti yang menarik perhatian saya. Mereka semua memposting foto dari pesawat terbang, di pantai dengan laptop mereka, dari kolam renang, dan kantor dengan pemandangan menakjubkan.

Revolusi Tempat Kerja: Para Ahli Teratas Membahas Kerja Hibrid dan Jarak Jauh

Dalam lanskap bisnis yang berkembang pesat saat ini, konsep kerja hibrid dan jarak jauh telah mendapatkan momentum yang belum pernah terjadi sebelumnya. Saat perusahaan terus beradaptasi dengan perubahan kebutuhan dan harapan karyawan mereka, para ahli dari berbagai bidang berkumpul untuk membahas manfaat, tantangan, dan masa depan cara kerja transformatif ini.