1

I am creating a microfrontend application using Angular ModuleFederation Application.

I've a reactive form in the 1 micro app

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

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

So, when I run this app http://localhost:4201/setup everything works fine with the validation.

After packing this app,

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()
        })
        
    }),

When I run the host app http://localhost:4200, the micro app loads but there is a weird behavior with the validation. It is duplicating as below and I've no clue.

enter image description here

host app 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()
        })
        
    }),

Any clues, please?

Update:

This is just not working with the route url changes

Works when the url is

http://localhost:4200

but not when the url is

http://localhost:4200/test
Hary
  • 5,690
  • 7
  • 42
  • 79
  • Weird! Maybe also add the forms and reactive forms libs to the shared array as singletons? – MikeOne Aug 22 '21 at 16:38
  • Tried with `'@angular/forms': { singleton: true, strictVersion: true, requiredVersion: 'auto' },` but still the same issue – Hary Aug 22 '21 at 16:39
  • Mmm.. strange. Maybe try some consoles inside the constructors of you components/services to see if anything is loaded more than expected? – MikeOne Aug 22 '21 at 16:45
  • I create a very simple component just with one form control with validation and no other dependencies and still the same issue! – Hary Aug 22 '21 at 17:06

1 Answers1

0

The issue was with the "@angular/animations. Followed the below steps and the issue gone.

  1. Added "@angular/animations": {singleton: true, eager: true} in both the remotes and the shell app.
  2. Removed BrowserAnimationsModule in all the modules except in all app.modules
  3. No need to share @angular/platform-browser/animations

Angular Module Federation BrowserModule

Hary
  • 5,690
  • 7
  • 42
  • 79