1

I am working on a micro front-end application using the Webpack 5 module federation with Angular 15. I am experiencing a strange issue where *ngIf work as expected on the shell project, but not on the other micro front-ends.

The *ngIf works fine when the page loads, but if any interaction is done to display a particular HTML using *ngIf the HTML keeps adding rather than removing the old HTML. I am not sure what is causing this issue.

Has anyone else experienced this issue before? If so, what was the solution? Any help would be greatly appreciated. Thank you in advance!

As seen in the image below when triggering the switch it should switch the chart between employees and departments.

Issue at hand

<div class="display-flex">
            <mat-card-title class="display-flex">
              <div class="display-flex">
                <h1 *ngIf="!employeesDepartmentCheck">Employees</h1>
                <h1 *ngIf="employeesDepartmentCheck">Departments</h1>
                <span class="spacer"></span>

                <mat-slide-toggle [checked]="employeesDepartmentCheck" (change)="onToggleEmpDep($event)"></mat-slide-toggle>
              </div>
            </mat-card-title>
          </div>

Tried Importing the common module directly into the module declaration. Tested the ngif on the shell micro frontend and it worked normally.

Kostas Nitaf
  • 428
  • 1
  • 2
  • 12
Nathan Ciantar
  • 21
  • 3
  • The culprit for this issue was the the BrowserAnimationModule was imported in the shared module, not sure why it was causing this issue but removing it from the shared and importing it directly onto the required module fixed it. – Nathan Ciantar Apr 21 '23 at 10:06

0 Answers0