[Angular] Remote module loaded remains even after navigation

[ckmahaz]

Hi,

I have a Nx MonoRepo where I'm trying to implement Module Federation.

Folder structure:
apps
---- app1
---- app2
libs
---- project/users
---- project/files

There are few menus in app1, clicking which the respective library (users/files) should be loaded as remote.

I have included webpack config in app2 where I exposed the two libraries:
exposes: { './users': './libs/project/users/src/lib/users.module.ts', './files': './libs/project/files/src/lib/files.module.ts' },

And, dynamically loading these in app1. Example:
{ path: 'users', loadChildren: () => loadRemoteModule({ remoteEntry: 'https://localhost:4201/remoteEntry.js', remoteName: 'project', exposedModule: './users' }).then(m => m.UsersModule) }

Inside Users Module and Files Module, I have a route with empty path with other routes with defined paths. Example:

{ path: '', component: UsersComponent, pathMatch: 'full' }, { path: 'addUser', loadChildren: () => import('@mfe/project/addUser/add-user').then(m => m.AddUserModule) },

Now app1 is loaded, on clicking Users (or Files) menu respective library is also loaded.

Issue:
Suppose I clicked Users menu and the respective remote module is loaded, then I navigate to other menus in the application, Users remain as it is in the view and new component (e.g. reports) is appended below Users. Again if I switch back to Users, I see the users content twice in page and the previous reports content is removed. So there is issue in routing - Remote module is not destroyed. I guess the issue is with the empty path in remote module but we need that as well. Is there a solution for this?