标签: webpack-module-federation

我正在关注描述设置模块联合的文章：https ://nx.dev/l/a/guides/setup-mfe-with-angular

从生成工作区开始，添加角度插件，然后添加仪表板应用程序。

在提供仪表板应用程序时，我从 styles.js 收到错误：

 Uncaught SyntaxError: Cannot use 'import.meta' outside a module

它正在加载为：

<script src="styles.js" defer></script>

进行一些快速搜索似乎表明这个东西应该有 type="module" 。

然而，我似乎找不到任何类型的配置来修改添加到index.html 的行。

我已经检查了 Angular 生成的常规模板，它对所有内容都使用 defer 样式，因此其他 js 文件条目在某个地方被更改为 type="module" 。普通的 styles.js 也不包含任何“import.meta”字符串。

任何解决方案都会有帮助。

我正在尝试反应模块联合。我使用 create-react-app 命令创建了两个 React 应用程序（modulefederation1、modulefederation2）。当我运行应用程序时，出现“未捕获错误：共享模块不可用于急切消费：webpack/sharing/consume/default/react/react”错误。

节点版本： v16.14.2

下面是我的代码。

模块联盟1：

包.json：

{
  "name": "modulefederation1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "serve": "^13.0.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --config webpack.prod.js",
    "serve": "serve dist -p 3002",
    "clean": "rm -rf dist"
},
  "eslintConfig": {
    "extends": [ …

我开始使用带有 Module Federation Plugin 的微前端。现在我在应用程序之间构建路由时面临一些问题。我的主机应用程序有路线 3 mfe 应用程序。他们每个人的内部都有自己的路由。Host-app 中的导航正常工作，就像内部导航一样，但是当我在 hostApp/app1/somePage1 上再次单击导航到 hostApp/app1 时，它仍然呈现 hostApp/app1/somePage1。您可以推荐什么架构？我如何控制它？现在我使用react-router-dom V6，但我想构建应用程序，以便明天我可以添加另一个库，例如 Angular-router 或 bla-bla-bla-Router，而无需对主机进行任何更改

export default function HostApp() {
 return (
  <BrowserRouter>
     <div>Hello, I'm the host app!</div>
     <NavLink to='/app1'> <button> app1 </button> </NavLink>
     <NavLink to='/app2'> <button> app1 </button> </NavLink>
     <NavLink to='/app3'> <button> app1 </button> </NavLink>
     <Routes>
       <Route path='/' element={
          <Suspense fallback={'Loading'}><div>home page container</div></Suspense>} />
       <Route path='app1/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp1/></Suspense>}/>
       <Route path='app2/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp2/></Suspense>}/>
       <Route path='app3/*' element={ 
          <Suspense fallback={'Loading'}> <MfeApp3/></Suspense>}/>
    </Routes>
  </BrowserRouter>
)}

Mfe应用程序： …

当我尝试获取远程容器并在网页上显示它的组件时，我收到错误 - Unexpected token '!==' main.js:619 。我尝试更新一些与 webpack 相关的包，但没有帮助。有人遇到过这个问题或者知道如何解决吗？

我把我的代码留在这里

ui: "ui@http://some.external.host/remoteEntry.js"此语法在 ModuleFederationPlugin 的属性中意味着什么remotes。我知道 ui 项目是从外部主机加载的，但是ui@主机定义之前是什么意思？

new ModuleFederationPlugin({
      name: "myApp",
      filename: "myAppEntry.js",
      remotes: {
        ui: "ui@http://some.external.host/remoteEntry.js",
      },
      shared: {
        ...,
      },
    }),

I\xc2\xb4m 将 Angular Web 分解为多个微前端。其中一个微前端负责处理购物车，并且它有一项服务来存储已添加的产品。我的 shell 微前端需要使用该服务在图标中显示汽车中有多少物品、添加新物品等。

我可以在微前端中使用存储在不同微前端中的服务吗？

我\xc2\xb4m 使用本教程，但它只解释了如何路由另一个微前端中的页面。

谢谢。

我正在尝试使用 webpack 模块联合构建 Angular Micro 前端。我已将所有自定义 webpack 文件添加到应用程序中。所有应用程序都构建良好。另外，当我尝试从各自的路径访问各个微前端时，它工作正常，但是当我尝试从 shell 应用程序访问各个微前端时，它会遇到无限刷新。我正在关注这篇文章作为参考。

不知道除了本文中提到的之外我还需要做什么。任何帮助都会得到帮助。

我目前正在开发一个使用 Webpack 5 的模块联合的项目。该项目包含 Angular 12 应用程序：一个应用程序是 shell，另一个应用程序是应加载到 shell 中的远程应用程序。两个应用程序本身都运行得很好，但是将遥控器导入 shell 应用程序时会出现以下错误：

core.js:6479 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:27)
    at innerSubscribe (innerSubscribe.js:71)
    at MergeMapSubscriber._innerSub (mergeMap.js:57)
    at MergeMapSubscriber._tryNext (mergeMap.js:51)
    at MergeMapSubscriber._next (mergeMap.js:34)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at MergeMapOperator.call (mergeMap.js:19)

远程应用程序正在向 REST 接口和 GraphQL 接口发出请求。似乎在执行请求并返回可观察值时发生错误。我的猜测是我的依赖项导致了问题。这些是我当前安装的依赖项：

core.js:6479 ERROR TypeError: You provided an invalid object where a stream …

我正在尝试使用模块联合作为集成工具在微前端上实现 POC。我能够单独运行微前端（在端口4001上运行），但是当我尝试运行集成了微前端的主机应用程序（在端口4000上运行）时，它抛出错误，表示无法找到 MF依赖项即react-redux和redux工具包，如下图所示。主机应用程序没有react-redux和redux工具包作为依赖项，我不确定为什么它试图从端口4000而不是4001获取依赖项。我可以知道如何解决这个问题吗？

主机-webpack.config

const config: Configuration = {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'container',
            remotes: {
                mf1: 'mf1@http://localhost:4001/remoteEntry.js'
            },
            shared: [deps]
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        new …

我有以下结构：

-mfp/
 - react-host/
  - webpack.dev.js
  - index.js
  - bootstrp.js
  - src/
   - App.js
 - angular-remote/
  - webpack.config.js
  - src/
   - main.ts
   - bootstrp.ts
   - app/
    - app.module.ts

我webpack.config.js在我的角度远程看起来如下

const webpack = require('webpack');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');


module.exports = {
  output: {
    uniqueName: "ang",
    publicPath: "http://localhost:8082/"
  },
  optimization: {
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: 'var', name: 'ang' },
        name: "ang",
        filename: "remoteEntry.js",
        exposes: {
            './angApp': './src/app/app.component.ts',
        },        
      
        shared: {
          '@angular/core': { eager: true, …