Ошибка ChunkLoad с Angular и модулем Federation

Question

Я пытаюсь создать угловой micro-frontendsс использованием module federation. Следуя этому руководству (часть angular CLI), я создал 3 проекта в рабочей области angular: shell , admin и dashboard .

Я пытаюсь создать простой пример микро-интерфейса, используя оболочку в качестве хоста и удаленно загружая администратора и панель инструментов . Я создал репо для этого: https://github.com/Aw3same/micro-frontend-mfe

Каждое приложение работает независимо хорошо, в ports 3000, 4000 and 5000. В оболочке у меня есть маршрутизация, которая предназначена для загрузки других проектов:

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

Точки входа в соответствующие проекты:

администратор

          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()
        })

    }),

приборная доска

          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()
        })

    }),

Когда я пытаюсь загрузить один из этих проектов (например, http://localhost:5000/admin), я получаю это в консоли:

Все веб-пакеты имеют эту конфигурацию:

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

Что я делаю неправильно? Любая помощь будет оценена

ОБНОВИТЬ

Я изменил маршрутизацию, чтобы микро-интерфейс загружался динамически. Я удалил записи remotes из оболочки webpack.confи добавил это в 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),
  },
];