Routing user from shell to remote (mfe)

[hmendezm]

Hi guys,

I have worked on this issue for almost 3 days that I have and I do not know how to fix it. The idea is to have a mfe that has all shared components such as login, auth callback, navigation, etc. So the mfe has more than one component. The shell should be able to load any of these shared components using a router. I am using the code below to route the request to the mfe that has all shared components. The issue here is the component is not loaded. The whole idea of this is to have one MFE with all shared stuff, so I do not need to duplicate it across all MFEs. If you have better ideas or examples in how to do it, please let me. I will appreciate it. I am new in mfes.

Shell router

{
          path: 'auth-callback',
          loadChildren: () =>
            loadRemoteModule({
              type: 'module',
              remoteEntry: 'http://localhost:5001/remoteEntry.js',
              exposedModule: './AuthCallback'
            })
              .then(m => m.AuthCallback)
        }

webpack.config (MFE)

 new ModuleFederationPlugin({
      name: 'shared-components',
      filename: 'remoteEntry.js',
      exposes: {
        './Login': 'apps/shared-components/src/app/login/login.component.ts',
        './AuthCallback':  'apps/shared-components/src/app/auth-callback/auth-callback.module.ts',

      },....

auth-callback.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AuthCallbackComponent } from './auth-callback.component';
const routes: Routes = [
  {
    path: '',
    component: AuthCallbackComponent,
  },
  { path: '**', component: AuthCallbackComponent }
];
@NgModule({
  imports: [CommonModule, ReactiveFormsModule, RouterModule.forRoot(routes)],
  declarations: [AuthCallbackComponent]
})
export class AuthCallback { }