webpack MFE ModuleFederationPlugin失败,出现TypeError:container.init不是函数

q8l4jmvw  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(134)

MFE 1将使用CustomElement angular/elements公开一些功能,包括一些html
MFE 2,它将使用这个远程MFE html。它将通过调用多个域特定的MFE来嵌入和创建。
以下是关于方法的一些细节:
MFE 1网络包配置

const singleSpaAngularWebpack =
      require('single-spa-angular/lib/webpack').default;
     const { merge } = require('webpack-merge');
     const { EnvironmentPlugin } = require('webpack');
     const { ModuleFederationPlugin } = require('webpack').container;

     require('dotenv').config();

    module.exports = (config, options) => {
       const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
       return merge(singleSpaWebpackConfig, {
       output: {
          scriptType: 'text/javascript'
        },
        plugins: [new ModuleFederationPlugin({
        name: 'mfe1',
        filename: 'remoteEntry.js',
        exposes: {
             './Module': 'src/app/app.module.ts',
        } 
      }),
      new EnvironmentPlugin(['ENVIRONMENT'])],
        })
       }

main.ts文件MF 2-调用远程MFE 1

import { loadRemoteEntry } from '@angular-architects/module-federation';

Promise.all([
  loadRemoteEntry({
    type: 'module',
    remoteEntry: 'http://localhost:4206/remoteEntry.js',
  }),
])
  .catch((err) => console.error('Error loading remote entries', err))
  .then(() => import('./bootstrap'))
  .catch((err) => console.error(err));

我的MFE 2路由文件是

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { EmptyRouteComponent } from './core/components/empty-route/empty-route.component';
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
 {
  path: 'test',
  loadChildren: () =>
      loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:4206/remoteEntry.js',
          exposedModule: './Module'
      })
      .then(m => m.MyModule)
},
 { path: '**', component: EmptyRouteComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
})
export class AppRoutingModule {}

问题:
ngx-logger.mjs:607 2023-02- 19 T14:59:44.358Z ERROR [main.js:575:21]订单中的全局错误处理程序出错错误:未被捕获(在承诺中):TypeError:container.init不是一个函数TypeError:容器.init不是angular-architects-module-federation-runtime.mjs中的函数:27:1
ngx-logger.mjs:607 2023-02- 19 T14:59:44.363Z ERROR [main.js:575:21]订单中的全局错误处理程序出错错误:未被捕获(在承诺中):TypeError:container.get不是函数TypeError:container.get不是angular-architects-module-federation-runtime.mjs中的函数:10:1
会少什么呢?

nuypyhwy

nuypyhwy1#

检查tslog.json中的lib数组,它使用的是es2020。以便为Angular 架构师使用正确的运行时。

"lib": ["es2020", "dom"]

相关问题