1

I tried in webpack.config.ts: instead of

exposes: {
'./Module': './projects/mfe1/src/app/users/users.module.ts',
},

replaced with

exposes: {
"./Module": "./projects/mfe1/src/app/app.module.ts",
},

In app.routes.ts at main shell:

{
    path: 'users',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'mfe1',
        exposedModule: './Module'
      }).then((m) => m.UsersModule), // m.AppModule
}

accessing in the main application, but i get as shown screenshot error?

ERROR Error: Uncaught (in promise): Error: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead. Error: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.

enter image description here

enter image description here

SaKol
  • 99
  • 10

1 Answers1

0

@SaKol, now your imports for UsersModulelooks so?

 @NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    ...
]

Remove BrowserModule from UsersModule imports. 
 @NgModule({
  imports: [
    CommonModule
    ...
]

Try to remove BrowserModule from your new mfe module. I reproduced same error in my app (which use module federation) enter image description here

Eugene_Kr
  • 109
  • 3
  • No, it not worked already in my project removed the (browserModule) import on User module of mfe1 project please find the screenshot above – SaKol Sep 30 '22 at 09:30
  • try to delete BrowserModule from others mfe-s... except shell... try this command: nx clear-cache or nx reset – Eugene_Kr Oct 03 '22 at 15:09
  • Tried removing the browser module on mfe1 and mfe2 app module, I get 'forRoot' is used outside of the injector. Lazy loaded modules should be use RouterModule.forChild() – SaKol Oct 05 '22 at 10:12
  • For @Eugene_Kr, referance provind the sample example its public repo you can have a look (https://github.com/Sakol538/MFe_Flights_module) – SaKol Oct 05 '22 at 11:49
  • @SaKol not sure what you want to do... how you want to organise the architecture. But if you want just to load this component make such changes: projects/shell/src/app/app.component.html line 4:
  • Flights
  • projects/shell/src/app/app.routes.ts line 22-25: { path: 'flights-search', component: FlightsSearchComponent, }, – Eugene_Kr Oct 06 '22 at 11:35
  • But I guess you are trying to achive something other... if you want to load this module and show component you should update your mfe1 module - first you must to load it(mfe1) instead of FlightsModule. So go into shell app.routes and define in routes per component load mfe1 on navigating to flights (mfe1/src/app/app.module). to load actual FlightsModule & Component via Mfe module you should in this Mfe1 AppModule define the routes structure - to guide angular routing into the correct Component. – Eugene_Kr Oct 06 '22 at 11:49
  • @SaKol ah ok now I see same message. So Navigate to webpack config and change shareAll method to share Pls consult the docs (sometimes it want work as expected) change shareAll to share and place next code(pls add other deps if required) – Eugene_Kr Oct 06 '22 at 12:10
  • 1
    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'}, '@angular/platform-browser': {singleton: true, strictVersion: true, requiredVersion: 'auto'} } }) – Eugene_Kr Oct 06 '22 at 12:19
  • https://github.com/EugeneKruglei/solution get it work – Eugene_Kr Oct 06 '22 at 12:46
  • Thanks for responding and show intrest on resolving the problem appriciative but I tried above repository (github.com/EugeneKruglei/solution) Getting the run time error at: Error: Shared module is not available for eager consumption: 1327 – SaKol Oct 10 '22 at 08:03
  • https://github.com/EugeneKruglei/solution/issues/1 – SaKol Oct 10 '22 at 08:08
  • hm it's strange, try to use your config for shared modules. It seems that mistake was in module loading & routing. – Eugene_Kr Oct 10 '22 at 15:18
  • Hey @SaKol, sorry for long reply - I updated/reverted back webpack config – Eugene_Kr Oct 26 '22 at 13:25
  • not resolved, closed ticket @Eugene_Kr – SaKol Oct 26 '22 at 14:40
  • what is not resolved? It works – Eugene_Kr Oct 31 '22 at 09:28
  • how we can access app components after injecting AppModule – SaKol Apr 01 '23 at 17:25