标签: angular-module-federation

我的 shell 和微前端有单独的存储库，我想在 shell 和微前端之间共享身份验证服务数据。

我使用下面的文章“第 5 步：共享 Monorepo 的库”来创建 AuthService 共享库，但由于我的不是 Monorepo，所以我将该库发布到 npm 中：

https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md

我的 AuthLibrary 的 npm：https://www.npmjs.com/package/@vijender1256/auth-lib

我将 npm 包安装到我的 shell 和微前端中。我正在 shell 应用程序中设置登录值，并希望在多个微前端中共享用户信息，我想使用此库进行跨 shell 和微前端的 AuthService 状态管理。

shell webpack.config.js

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' }),
    ...sharedMappings.getDescriptors()
  },
  sharedMappings: ['@vijender1256/auth-lib'],
});

微前端 webpack.config.js：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'itemMfe',

  exposes: {
    './ItemModule': …

我正在尝试通过 shell（主机）和 trip（远程）实现一个非常简单的模块联合。每当我尝试从 Travel 动态加载 AbcModule 时，我都会在 shell 中收到以下错误：

错误错误：未捕获（在承诺中）：TypeError：无法读取未定义的属性（读取“init”）TypeError：无法读取未定义的属性（读取“init”）在 angular-architects-module-federation-runtime.js：26： 1 在 Generator.next () 处完成 (tslib.es6.js:73:43) 在 _ZoneDelegate.invoke (zone.js:372:1) 在 Object.onInvoke (core.mjs:25634:33) 在 _ZoneDelegate.invoke (zone.js:371:1) 在 Zone.run (zone.js:134:1) 在 zone.js:1275:1 在 _ZoneDelegate.invokeTask (zone.js:406:1) 在 Object.onInvokeTask (core. mjs：25621：33）在resolvePromise（zone.js：1211：1）在zone.js：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) 在 Zone.run (zone.js:134:1) 在 zone.js:1275:1 在 _ZoneDelegate .invokeTask (zone.js:406:1) 在 Object.onInvokeTask (core.mjs:25621:33)

错误错误：未捕获（在承诺中）：类型错误：无法读取未定义的属性（读取“get”）类型错误：无法读取未定义的属性（读取“get”）在 angular-architects-module-federation-runtime.js:9: 1 在 Generator.next () 在 tslib.es6.js:76:1 在新的 ZoneAwarePromise (zone.js:1427:1) 在 __awaiter (tslib.es6.js:72:1) 在lookupExposeModule (Angular-architects-module) -federation-runtime.js:7:21) 在 angular-architects-module-federation-runtime.js:106:1 在 Generator.next () 在 …

我正在使用 Angular 14 和模块联合。在我的远程应用程序中，我有这个文件结构

- package.json
- webpack.config.js
+ src
    - settings.json
    + app
        + services
            - app.service.ts

在我的 app.service.ts 文件中，我访问一个静态 JSON 文件，如下所示

@Injectable({
  providedIn: 'root'
})
export class AppService {
    ...
     public init() {
        const request = new XMLHttpRequest();
        request.open('GET', this.configUrl, false);
        request.send(null);
        ...
    }

在我的 webpack.config.js 文件中，我尝试像这样公开我的模块和文件

module.exports = withModuleFederationPlugin({

  name: 'productlist',

  exposes: {
    './Component': './src/app/app.component.ts',
    './dashboard':'./src/app/my-product-list/my-product-list.module.ts'
  },

  shared: {
    '.settings.json': {
      singleton: true,
      eager: true,
      import: './src/settings.json',
      requiredVersion: 'auto',
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' …