ChunkLoad Error with Angular and module Federation

Question

I'm trying to create an angular micro-frontends using module federation. Following this tutorial (the angular CLI part), I've created 3 projects in an angular workspace: shell, admin and dashboard.

I'm trying to create a simple example of micro-frontend, using shell as host and loading remotely admin and dashboard. I've created a repo for this : https://github.com/Aw3same/micro-frontend-mfe

Every application run independently well , in ports 3000, 4000 and 5000. In shell, I have a routing that intends to load the other projects:

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('admin/Module').then((m) => m.RemoteEntryModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('dashboard/Module').then((m) => m.RemoteEntryModule)
}
];

The entrypoints on the respectively projects are:

admin

    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        name: "admin",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './projects/admin/src/app/app.module.ts',
        },

        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' },

          ...sharedMappings.getDescriptors()
        })

    }),

dashboard

    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        name: "dashboard",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './projects/dashboard/src/app/app.module.ts',
        },

        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' },

          ...sharedMappings.getDescriptors()
        })

    }),

When I try to load one of these projects (going to http://localhost:5000/admin, eg) , I receive this in console:

All webpacks have this configuration:

  output: {
    uniqueName: "dashboard",
    publicPath: "auto",
    scriptType: 'text/javascript'
  },

What I am doing wrong? Any help would be appreciated

UPDATE

I changed the routing to load the micro-frontend in a dynamic way. I deleted the remotes entries from the shell webpack.conf and added this to the shell.routing:

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:3000/remoteEntry.js',
        exposedModule: './Module',
      }).then((m) => m.RemoteEntryModule),
  },
  // Before
  // {
  //   path: 'admin',
  //   loadChildren: () => import('admin/Module').then((m) => m.RemoteEntryModule),
  // },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('dashboard/Module').then((m) => m.RemoteEntryModule),
  },
];