当路线被激活时，角联合模块无法加载

Question

我正在尝试与Shell（主机）和Travel（远程）实现非常简单的模块联合会。每当我尝试动态加载旅行中的AbcModule时，我会在Shell中获得以下错误：

错误错误：未被发达（在承诺中）：TypeError：无法读取属性 未定义（读取'init'）typeError：无法读取的属性 未定义（阅读“初始化”） 在Angular-Architects-Module-FeDeration-Runtime.js：26：1 在genertator.next（） 在满足（TSLIB.ES6.JS：73：43） 在_zonedelegate.invoke（Zone.JS：372：1） 在object.oninvoke（core.mjs：25634：33） 在_zonedelegate.Invoke（Zone.JS：371：1） 在区域。 在区域：1275：1 在_zonedelegate.invoketask（Zone.JS：406：1） 在object.oninvoketask（core.mjs：25621：33） 在Resolve Promise（Zone.JS：1211：1） 在区域：1118：1 在满足（TSLIB.ES6.JS：73：86） 在_zonedelegate.invoke（Zone.JS：372：1） 在object.oninvoke（core.mjs：25634：33） 在_zonedelegate.Invoke（Zone.JS：371：1） 在区域。 在区域：1275：1 在_zonedelegate.invoketask（Zone.JS：406：1） 在object.oninvoketask（core.mjs：25621：33）

错误错误：未被发达（在承诺中）：TypeError：无法读取属性 未定义（读取'get'）typeError：无法读取的属性 未定义（阅读“获取”） 在Angular-Architects-Module-FeDeration-Runtime.js：9：1 在genertator.next（） 在tslib.es6.js：76：1 在新的ZoneAwarePromise（Zone.JS：1427：1） 在__awaiter（tslib.es6.js：72：1） 在LookupExpedModule（Angular-Architects-Module-FeDeration-runtime.js：7：21） 在Angular-Architects-Module-FeDeration-Runtime.js：106：1 在genertator.next（） 在满足（TSLIB.ES6.JS：73：43） 在_zonedelegate.invoke（Zone.JS：372：1） 在Resolve Promise（Zone.JS：1211：1） 在Resolve Promise（Zone.JS：1165：1） 在区域：1278：1 在_zonedelegate.invoketask（Zone.JS：406：1） 在object.oninvoketask（core.mjs：25621：33） 在_zonedelegate.invoketask（Zone.JS：405：1） 在Zone.Runtask（Zone.JS：178：1） 在drainmicrotaskqueue（区域：585：1） 在Zonetask.invoketask [AS Invoke]（Zone.JS：49

）

来自Shell的应用程序路由：

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来自Shell：

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 from Travel：

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：travel：travel：travel：

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 {}

Answer 1

我通过更改loadRemoteModule参数来使它起作用：

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)
  }
];