Angular 微前端联合 angular material

Question

我正在创建一个 angular 远程应用程序，我想在其他应用程序中重用该组件。为此，我使用 angular 12、angular material 和模块联合创建了一个测试项目。

除了使用 angular material 的组件外，该应用程序运行良好，您可以在下面看到远程和 shell 中的 UI。我还附上了组件的 html 实现。

我的遥控器UI

我的shellUI

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

Answer 1

我遇到了与 Angular Material 类似的问题，垫子 select 打开的面板无法关闭。

对我来说，问题是我在多个应用程序中导入了 BrowserModule。确保只将它导入到 shell / 主机应用程序的根模块中。在您的微前端中，您应该改为导入 CommonModule。

据我所知，多次导入 BrowserModule 可能会破坏您的应用程序，因为它会覆盖 Angular 运行时的某些部分。

Angular 微前端联合 angular material

Angular microfrontend Federation with angular material

angular-material

angular

angular-forms

webpack-5

webpack-module-federation