Angular microfrontend Federation with angular material

Question

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

My shell UI

<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>

Would you please refrain from questions or opinions not related to programming? I find the question to be more of an idea based one rather than asking to solve a programming question. — Praveen Thirumurugan
– Praveen Thirumurugan, Commented Aug 6, 2021 at 12:28
Unfortunately this is a question related to programming. I am having a bug which I have some problem to solve and I am wondering if it is a common bug outside my code scope. If you like I could provide you with some additional information. — Andlab
– Andlab, Commented Aug 6, 2021 at 13:11
Asking for any “known bugs” doesn't aupport your argument here. — Praveen Thirumurugan
– Praveen Thirumurugan, Commented Aug 6, 2021 at 13:24
Ok, thanks for the feedback. I have now added the code as well as showing how the UI appear both in the remote (where the implementation is) and the shell. Please let me know if you require any addtional information. — Andlab
– Andlab, Commented Aug 6, 2021 at 13:42

StippeJ · Accepted Answer · 2021-10-13 12:54:56Z

2

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.

edited Oct 13, 2021 at 12:54

answered Sep 15, 2021 at 14:13

StippeJ

4312 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vamsi Over a year ago

I have tried above steps but no luck

Geo j Over a year ago

@vasmi. Did you come right?

Collectives™ on Stack Overflow

Angular microfrontend Federation with angular material

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related