0

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>
Andlab
  • 43
  • 7
  • 1
    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 Aug 06 '21 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 Aug 06 '21 at 13:11
  • 1
    Asking for any “known bugs” doesn't aupport your argument here. – Praveen Thirumurugan Aug 06 '21 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 Aug 06 '21 at 13:42

1 Answers1

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.

StippeJ
  • 391
  • 1
  • 11