javascript - Angularin federoitua moduulia ei voi ladata, kun reitti aktivoitaisiin

Yritän saavuttaa erittäin yksinkertaisen moduulien federaation shellin (isäntä) ja travelin (etä) kanssa. Aina kun yritän dynaamisesti ladata AbcModulea travelista, saan shellissä seuraavan virheen:

VIRHE Virhe: Kiinnittämätön (promississa): TypeError: Ei voi lukea määrittelemättömän ominaisuuksia (lukemassa 'init') TypeError: Ei voi lukea määrittelemättömän ominaisuuksia (lukemassa 'init') kohdassa angular-architects-module-federation-runtime.js:26:1 kohdassa Generator.next() kohdassa fulfilled (tslib.es6.js:73:43) kohdassa _ZoneDelegate.invoke (zone.js:372:1) kohdassa Object.onInvoke (core.mjs:25634:33) kohdassa _ZoneDelegate.invoke (zone.js:371:1) kohdassa Zone.run (zone.js:134:1) kohdassa zone.js:1275:1 kohdassa _ZoneDelegate.invokeTask (zone.js:406:1) kohdassa Object.onInvokeTask (core.mjs:25621:33) kohdassa resolvePromise (zone.js:1211:1) kohdassa zone.js:1118:1 kohdassa fulfilled (tslib.es6.js:73:86) kohdassa _ZoneDelegate.invoke (zone.js:372:1) kohdassa Object.onInvoke (core.mjs:25634:33) kohdassa _ZoneDelegate.invoke (zone.js:371:1) kohdassa Zone.run (zone.js:134:1) kohdassa zone.js:1275:1 kohdassa _ZoneDelegate.invokeTask (zone.js:406:1) kohdassa Object.onInvokeTask (core.mjs:25621:33)

VIRHE Virhe: Napatsematon (luvassa): TypeError: Ei voi lukea määrittelemättömän ominaisuuksia (lukiessa 'get') TypeError: Ei voi lukea määrittelemättömän ominaisuuksia (lukiessa 'get') kohdassa angular-architects-module-federation-runtime.js:9:1 kohdassa Generator.next() kohdassa tslib.es6.js:76:1 kohdassa uusi ZoneAwarePromise (zone.js:1427:1) kohdassa __awaiter (tslib.es6.js:72:1) kohdassa lookupExposedModule (angular-architects-module-federation-runtime.js:7:21) kohdassa angular-architects-module-federation-runtime.js:106:1 kohdassa Generator.next() kohdassa fulfilled (tslib.es6.js:73:43) kohdassa _ZoneDelegate.invoke (zone.js:372:1) kohdassa resolvePromise (zone.js:1211:1) kohdassa resolvePromise (zone.js:1165:1) kohdassa zone.js:1278:1 kohdassa _ZoneDelegate.invokeTask (zone.js:406:1) kohdassa Object.onInvokeTask (core.mjs:25621:33) kohdassa _ZoneDelegate.invokeTask (zone.js:405:1) kohdassa Zone.runTask (zone.js:178:1) kohdassa drainMicroTaskQueue (zone.js:585:1) kohdassa ZoneTask.invokeTask [as invoke] (zone.js:49)

sovelluksen reitit kuorelta:

import { loadRemoteModule } from "@angular-architects/module-federation";
import { Routes } from "@angular/router";
import { TestComponent } from "./test/test.component";

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: TestComponent,
    pathMatch: 'full'
  },
  {
    path: 'abc',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      remoteName: 'travel',
      exposedModule: './Module'
    })
    .then(m => m.AbcModule)
  }
];

webpack.config.js komentoriviltä:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "shell",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },


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

    }),
    sharedMappings.getPlugin()
  ],
};

webpack.config.js matkasta:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "travel",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

       name: "travel",
       filename: "remoteEntry.js",
       exposes: {
           './Module': './apps/travel/src/app/abc/abc.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()
        })

    }),
    sharedMappings.getPlugin()
  ],
};

AbcModule matkalta:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AbcComponent } from './abc/abc.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [AbcComponent],
  imports: [CommonModule, RouterModule.forChild([
    {
      path: '',
      component: AbcComponent
    }
  ])],
  exports: [RouterModule]
})
export class AbcModule {}

Vastaus #1

Sain sen toimimaan muuttamalla loadRemoteModule-parametrin näin:

import { loadRemoteModule } from "@angular-architects/module-federation";
import { Routes } from "@angular/router";
import { TestComponent } from "./test/test.component";

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: TestComponent,
    pathMatch: 'full'
  },
  {
    path: 'abc',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      type: 'module',
      exposedModule: './Module'
    })
    .then(m => m.AbcModule)
  }
];