MicroFrontends nedir?

MicroFrontends, web uygulamalarını daha küçük, bağımsız ve gevşek bağlı modüllere bölerek oluşturmak için kullanılan bir mimari stildir. Her modül veya MicroFrontend, kendi bağımlılıkları, teknolojileri ve ekipleriyle bağımsız olarak geliştirilir ve devreye alınır.

Angular 15'te MicroFrontend'i uygulamak, uygulamayı bağımsız olarak geliştirilip konuşlandırılabilecek daha küçük parçalara ayırmayı içerir. Her MicroFrontend'in kendi Angular uygulaması, kendi bileşenleri, hizmetleri ve modülleri olmalıdır.

Angular 15'te MicroFrontend'i uygulamaya yönelik temel adımlar:

1. Uygulamayı iş alanına veya işlevselliğe göre daha küçük, bağımsız parçalara ayırın.
2. Her MicroFrontend için kendi bileşenleri, hizmetleri ve modülleri olan bir Açısal uygulama oluşturun.
3. MicroFrontend'ler arasındaki iletişim için bir API sözleşmesi tanımlayın. Bu, RESTful API'ler, WebSockets veya özel olaylar olabilir.
4. MicroFrontend'leri çalışma zamanında ana uygulamaya dinamik olarak yüklemek için bir modül federasyon eklentisi kullanın. Modül federasyonu, birden çok uygulamanın çalışma zamanında kod paylaşmasına izin veren bir Webpack özelliğidir.
5. Birden çok MicroFrontend tarafından kullanılabilen ortak kod ve bileşenleri içeren paylaşılan bir modül uygulayın.
6. MicroFrontend'lerde uygulama durumunu yönetmek için Redux veya NgRx gibi merkezi bir durum yönetim sistemi kullanın.
7. Tutarlı bir kullanıcı deneyimi sağlamak için MicroFrontends genelinde tutarlı bir UI tasarım sistemi uygulayın.

Modül Federasyonu kullanan Angular'da MicroFrontends

HOST Uygulama Yapılandırması

1. Ana Bilgisayar Uygulaması Oluşturma

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

2. Ana bilgisayar uygulaması oluşturun (Ana Uygulama)

Tüm uzak uygulamaları aldığımız ve onlar için yönlendirmeyi yapılandırdığımız Ana Uygulamadır.

ng g application host

4. Yöneticiye yol eklemek ve AppComponent'i değiştirmek için Rotayı güncelleyin

app-routing.module.ts'ye Rota ekleyin

app.component.html dosyasını temizleyin ve aşağıdaki kodu ekleyin

5. Uygulamayı çalıştırın

ng serve host

Uzak Uygulamalar ve Yapılandırmalar Oluşturma

1. Uzak uygulama 1 ve uzak uygulama 2 oluşturun

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Şimdi Modül Federasyon Paketini üç uygulamaya ekliyoruz

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. Şimdi bu açık webpack.config.js için remoteapp1 ve remoteapp2'de Remote Applications'tan modülleri gösterin

7. Webpack.config.js ana bilgisayar uygulamasında Exposed modüllerini yakalayın

8. Şimdi ana uygulama app.module.ts'de yönlendirmeyi yapılandırın

9. Rotaları yapılandırdıktan sonra modül bulunamadı gibi hatalar alıyorsunuz. ana uygulama klasöründe bir decl.d.ts oluşturmanız gerekir.

10. Ardından, remoteapp1 ve remoteapp2'de aşağıdaki hatayı alırsanız. sonra home.module.ts'yi tsconfig'e (dosyalar) ekleyin.

11. Şimdi uzaktan kumandaları ayırın ve ana bilgisayar app.component.ts'yi aşağıdaki gibi değiştirin

12. Şimdi ana bilgisayar uygulamasını tarayıcıda açın ve test edin.

Çalışma……

Depo Bağlantısı:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Herhangi bir şüpheniz varsa teşekkür ederiz. mesajı yorumlara bırakın