1

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.

Improve this question
4
  • Please don't post pictures of code, errors or other text Commented Oct 11, 2023 at 14:13
  • it is for better understanding of the issue facing . Commented Oct 11, 2023 at 17:23
  • meta.stackoverflow.com/questions/285551/… Commented Oct 12, 2023 at 4:37
  • have refactored the question ... Commented Oct 12, 2023 at 15:11
Related questions
9
ngx-translate is not working for lazy loaded module
14
@ngx-translate with lazy-loaded module in Angular 5
5
Error with ngx-translate: No provider for TranslateStore
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.