MicroFrontends란 무엇입니까?

MicroFrontends는 웹 애플리케이션을 더 작고 독립적이며 느슨하게 결합된 모듈로 분해하여 구축하기 위한 아키텍처 스타일입니다. 각 모듈 또는 MicroFrontend는 고유한 종속성, 기술 및 팀 세트와 함께 독립적으로 개발 및 배포됩니다.

Angular 15에서 MicroFrontend를 구현하려면 애플리케이션을 독립적으로 개발하고 배포할 수 있는 더 작은 부분으로 나누는 작업이 필요합니다. 각 MicroFrontend에는 고유한 구성 요소, 서비스 및 모듈 세트가 있는 고유한 Angular 애플리케이션이 있어야 합니다.

Angular 15에서 MicroFrontend를 구현하는 주요 단계:

1. 애플리케이션을 비즈니스 도메인 또는 기능에 따라 더 작고 독립적인 부분으로 나눕니다.
2. 고유한 구성 요소, 서비스 및 모듈 세트를 사용하여 각 MicroFrontend에 대한 Angular 애플리케이션을 만듭니다.
3. MicroFrontends 간의 통신을 위한 API 계약을 정의합니다. 이는 RESTful API, WebSocket 또는 사용자 지정 이벤트일 수 있습니다.
4. 런타임에 MicroFrontends를 기본 애플리케이션에 동적으로 로드하려면 모듈 연합 플러그인을 사용하십시오. 모듈 연합은 여러 애플리케이션이 런타임에 코드를 공유할 수 있도록 하는 Webpack의 기능입니다.
5. 여러 MicroFrontend에서 사용할 수 있는 공통 코드 및 구성 요소가 포함된 공유 모듈을 구현합니다.
6. Redux 또는 NgRx와 같은 중앙 집중식 상태 관리 시스템을 사용하여 MicroFrontends에서 애플리케이션 상태를 관리합니다.
7. 일관된 사용자 경험을 보장하기 위해 MicroFrontends에서 일관된 UI 디자인 시스템을 구현합니다.

Module Federation을 사용하는 Angular의 MicroFrontends

호스트 애플리케이션 구성

1. 호스트 애플리케이션 생성

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

2. 호스트 앱(메인 애플리케이션) 생성

모든 원격 애플리케이션을 가져오고 이에 대한 라우팅을 구성하는 것은 메인 애플리케이션입니다.

ng g application host

4. 경로를 업데이트하여 관리자에게 경로를 추가하고 AppComponent를 변경합니다.

app-routing.module.ts 에 경로 추가

app.component.html을 정리 하고 아래 코드를 추가합니다.

5. 애플리케이션 실행

ng serve host

원격 애플리케이션 및 구성 생성

1. 원격 애플리케이션 1 및 원격 애플리케이션 2 생성

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. 이제 모듈 연합 패키지를 세 가지 애플리케이션에 추가

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. 이제 remoteapp1 및 remoteapp2에서 열려 있는 webpack.config.js에 대한 원격 애플리케이션의 모듈을 노출합니다.

7. 호스트 애플리케이션 webpack.config.js 에서 Exposed 모듈을 포착합니다.

8. 이제 호스트 애플리케이션 app.module.ts에서 라우팅을 구성합니다.

9. 경로를 구성한 후 모듈을 찾을 수 없음과 같은 오류가 발생합니다. 호스트 앱 폴더에 decl.d.ts를 생성해야 합니다.

10. 그런 다음 remoteapp1 및 remoteapp2에서 아래 오류가 발생하는 경우. 그런 다음 tsconfig(파일)에 home.module.ts를 추가합니다.

11. 이제 리모컨을 예약하고 아래와 같이 호스트 app.component.ts를 수정합니다.

12. 이제 브라우저에서 호스트 애플리케이션을 열고 테스트합니다.

일하고 있는……

레포 링크 :https://github.com/GuruNadh552/Micro-Frontends-in-Angular

의심이 있으시면 감사합니다. 댓글에 메시지를 남겨주세요