Angular Module Federation Webpack 和 Reactive Forms FormControl 重复

Question

我正在使用 Angular ModuleFederation 应用程序创建微前端应用程序。

我在 1 微型应用程序中有一个响应式表单

<input type="text" [formControl]="email" />

<span class="text-danger" *ngIf="email.hasError('required')">This field is required</span>

所以，当我运行这个应用 http://localhost:4201/setup 验证时一切正常。

打包此应用后，

new ModuleFederationPlugin({
      
        // For remotes (please adjust)
        name: "businessSetup",
        filename: "businessSetupRemoteEntry.js",
        exposes: {
             './BusinessSetupModule': './projects/business-setup/src/app/components/setup/setup.module.ts',
        },        
    
        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })
        
    }),

当我运行主机应用程序 http://localhost:4200 时，微应用程序加载但验证时出现奇怪的行为。它正在复制如下，我不知道。

托管应用程序 webpack

 new ModuleFederationPlugin({
      
      
        // For hosts (please adjust)
         remotes: {
             "businessSetup": "businessSetup@http://localhost:4201/businessSetupRemoteEntry.js",
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })
        
    }),

有什么线索吗？

更新：

这只是不适用于路线 url 更改

当 url 为

时有效

http://localhost:4200

但当 url 为

时则不然

http://localhost:4200/test

Answer 1

问题出在 "@angular/animations。按照以下步骤操作，问题消失了。

在遥控器和 shell 应用程序中添加了 "@angular/animations": {singleton: true, eager: true}。
删除了除所有 app.modules

BrowserAnimationsModule

无需分享@angular/platform-browser/animations

Angular Module Federation Webpack 和 Reactive Forms FormControl 重复

Angular Module Federation Webpack and Reactive Forms FormControl duplication

angular

webpack-module-federation