CODEWITHSUNDEEP
angularangular-materialangular-formswebpack-5webpack-module-federation
Andlab
Andlab

Reputation: 53

Angular microfrontend Federation with angular material

I am creating an angular remote app which I want to reuse the components in other apps. In order to do so I have made a test project using angular 12, with angular material and module federation.

The app works fine with exception of components which uses angular material, below you can see the UI in remote and in shell. I also attached my html implementation of the component.

My remote UI enter image description here

My shell UI enter image description here

<style> input[type=text] {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid silver;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;} 

button {
  border: 2px solid silver;
  color: green;
  background-color: white;
  font-size: 16px;
  padding: 10px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  cursor: pointer;} button:active {
  border-color: black; }

#container {
  border: 2px darkred dashed;
  padding: 20px;
}
</style>

<div class="file-picker">
  <div class="row">
    <div class="col-md-3">
      <input type="file" #file placeholder="Choose file" 
       (change)="uploadFile(file.files)" style="display: none">
      <button type="button" class="btn btn-success" mat-button 
       (click)="file.click()">Upload File to bucket <mat- 
        icon>attach_file</mat-icon></button>
      <span *ngIf="convertToSvfService.inProgress"class="upload">
        <mat-progress-bar mode="query"></mat-progress-bar>
      </span>
    </div>
  </div> 
</div>

Upvotes: 0

Views: 2114

Answers (1)

StippeJ
StippeJ

Reputation: 431

I had a similar issue with Angular Material where the opened panels of a mat-select wouldn't close.

For me the problem was that I imported the BrowserModule in multiple apps. Make sure that you only import it in your shell / host application's root-module. In your micro frontends you should import CommonModule instead.

As I understand importing the BrowserModule multiple times can break your application because it overrides certain parts of the Angular runtime.

Upvotes: 2

Related Questions