0

Overview

Micro-Frontend that are developed using Angular-Elements can be either of the two types below.

  1. Single Page or widget Micro-Frontend (Microapp-A)
  2. Multi Page Micro-Frontend (Microapp-B)

Problem Statement

In Micro-Frontend with multiple page, it is observed that the routing is not updated when Micro-Fronted is loaded again. For eg, in this sample application, there are five pages in the driver. Page-One, Page-Three and Page-Five load Microapp-A. Page-Two and Page-Four load Microapp-B. When Microapp-B is loaded again in Page-Four, the routes are not loaded properly.

Probable Cause

Micro-Frontend is not getting destroyed properly. Due to this, the routes are not getting re-initialized.

Is there a way to destroy Angular-elements properly ?

Repo URL to reproduce - https://github.com/pranesh229/micro-frontend-sample-angular-11

Pranesh Udumalpet Hanumanth
  • 308
  • 1
  • 6

1 Answers1

0

I use jquery to do a remove on the HTML containing the web component tag. The script for the web component is removed to, but keep in mind the script is already downloaded so unless you version it you wont re pull down the code. Not sure if this helps but just my thought process.

cempro
  • 49
  • 1
  • 7