Getting translate pipe(ngx-translate) not found error in lazy loaded remote module with module federation framewok in angular

Question

I have a shell application on angular 13 version and a remote application on angular 16 version.I I am doing lazy loading of the remote app using Module Federation Framework.

In the remote app component when i am trying to use the translate pipe of ngx-translate library i am getting the translate pipe not found error .

Below are the configuration of the shell app

• [app.module.ts of shell app]

  TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  },
  isolate: false
  

  })

• [webpack.config.ts of shell app]

    shared: share({
      "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@ngx-translate/core": { singleton: true, strictVersion: false, requiredVersion: 'auto'},
      "@ngx-translate/http-loader": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
  
      ...sharedMappings.getDescriptors()
     })
  

• [lazy loading of remote module in app-routing.module.ts]

{
    path: 'feld-np-dashboard',
    component: CommonDashboardPageComponent,
    canActivate: [AuthenticationGuard],
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: environment.feldUri,
        exposedModule: './Module'
      }).then(m => m.FeldNpModule)
  }

Then Below are the configuration of remote app

• [feld-np.module.ts (remote module)]

  TranslateModule.forChild({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  },
  isolate: false
  

  }),

• [webpack.config.ts of remote app]

    shared: share({
      "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
      "@ngx-translate/core": { singleton: true, strictVersion: false, requiredVersion: 'auto'},
      "@ngx-translate/http-loader": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
  
      ...sharedMappings.getDescriptors()
     })
  

Below is the code of the exception when the component of the remote module is invoked .

[translate pipe not found]

core.mjs:6509 ERROR Error: NG0302:
 The pipe 'translate' could not be found in the 'DashboardComponent' component!. Find more at https://angular.io/errors/NG0302
    at getPipeDef (core.mjs:22372:15)
    at Module.ɵɵpipe (core.mjs:22324:19)

Have tried all the solution mentioned on google but this issue is not getting resolved.

I am not able to understand exactly what is the issue is the configuration missing or something else .

Kindly please help in resolving the issue.