angular - Angular Module Federation Webpack 和 Reactive Forms FormControl 复制

Question

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

我在 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 更改

当网址为

http://localhost:4200

但不是当网址是

http://localhost:4200/test

标签： angularwebpack-module-federation

Answer 1

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

1. "@angular/animations": {singleton: true, eager: true}在遥控器和 shell 应用程序中都添加了。
2. 在所有模块中删除BrowserAnimationsModule，除了所有app.modules
3. 无需分享@angular/platform-browser/animations

Angular 模块联盟 BrowserModule