标签: micro-frontend

我一直在尝试实施单 Spa 包裹，但出现以下异常

index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error: 
                  <Parcel /> was not passed a mountParcel prop, nor is it rendered where mountParcel is within the React context.
                  If you are using <Parcel /> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <Parcel /> as a mountParcel prop   

    at index.js:167
    at index.js:114

该错误与 mountParcel 属性有关，该属性是从包裹中传递的，我已从 single-spa 库中提取了它，但仍然遇到相同的问题，我已经与这个问题作斗争一段时间了，请协助

请在下面找到我的代码

包裹配置.js

// myParcel.js
import …

我正在使用微前端架构创建一个 UI 应用程序。我有三个应用程序：1.micro -app-a（用角度编写）2.micro -app-b（用角度编写）3.shell应用程序（用角度编写）

我的微应用程序-a有自己的角度路由器来管理路由，类似地，微应用程序-b也有自己的角度路由器，它们单独按预期工作，但当我将这两个微应用程序组合为一个时，我无法管理路由Web 组件（@angular/element）集成到单个 shell 应用程序中。我不知道如何管理路由。请有这方面知识的人帮助我。:)

第一个想法是cookie，但你很快就会耗尽空间。

我正在尝试按照此示例使用webpack5 模块联合来实现 Angular 中的微前端概念Module federation with Angular，但我面临这个错误

我尝试了这个答案中提供的解决方案，必须从注入上下文调用inject()，但它不起作用。

目前我在这两个应用程序中都使用 Angular 版本 11。

正在导入的应用程序的 package.json （子级）

    "resolutions": {
    "webpack": "5.0.0"
  },
  "dependencies": {
    "@angular/animations": "11.0.0-next.6",
    "@angular/cdk": "11.0.0-next.6",
    "@angular/common": "11.0.0-next.6",
    "@angular/compiler": "11.0.0-next.6",
    "@angular/core": "11.0.0-next.6",
    "@angular/forms": "11.0.0-next.6",
    "@angular/platform-browser": "11.0.0-next.6",
    "@angular/platform-browser-dynamic": "11.0.0-next.6",
    "@angular/platform-server": "^11.0.0",
    "@angular/router": "11.0.0-next.6",
    "@angular/service-worker": "11.0.0-next.6",
    "@fortawesome/angular-fontawesome": "^0.8.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.1.4",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "js2xmlparser": "^4.0.0",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.28",
    "ngx-webstorage-service": "^4.1.0",
    "node-sass": …

我开始尝试使用 webpack 模块联合的微前端。这是为了一个非常特殊的目的，因为在我们公司，我们开发大型软件，例如在基于角色的访问控制中做出反应的仪表板，我希望每个部分（或几乎）都是一个单独的应用程序。

所以我设法实现了一切，只是我注意到当我修改远程应用程序时，应用程序容器的自动重新加载没有完成。我可以理解为什么，但我想知道是否有办法修改它？知道我不能只在远程应用程序上工作，因为它使用应用程序容器的冗余提供程序......

这是我的应用程序容器的 webpack 配置：

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
  .ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index",
  target:"web",
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 3001,
    hot:true
  },
  output: {
    publicPath: "auto",
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /bootstrap\.tsx$/,
        loader: "bundle-loader",
        options: {
          lazy: true,
        },
      },
      {
        test: /\.tsx?$/,
        loader: "babel-loader",
        exclude: …

我正在运行一个具有多个 React 版本的微前端应用程序，每个微前端存储库都使用延迟加载来动态加载其 React 版本，并且它按预期工作（耶！）微前端应用程序的结构如下：

话虽如此，我遇到了样式组件多版本控制的问题，并在开发模式下（不在生产​​中）收到以下控制台警告：

有关更多技术细节，请查看带有实现的示例存储库。

由于该应用程序使用 CRA 来简化 webpack/babel 的配置，我想知道是否有改进初始配置以解决此控制台警告的好方法。

我检查了警告中共享的文档链接，虽然我知道微前端不是维护项目的最佳方式，但我们仍然希望向我们的用户提供此选项，因为他们可能需要逐步迁移他们的项目版本，所以我仍然有兴趣解决这个控制台警告。

任何提示或建议的解决方案将不胜感激。

打印警告：

react_devtools_backend.js:2430 看起来这个应用程序中初始化了几个“样式组件”的实例。这可能会导致动态样式无法正确呈现、重新水化过程中出现错误、缺少主题道具，并在没有充分理由的情况下使您的应用程序变大。有关更多信息，请参阅https://sc.sh/2BAXzed。

当我将 React 与 ReactRouter 结合使用时，我可以延迟加载应用程序的入口文件吗？remoteEntry.js当我进入页面时，我拥有的每个应用程序都有很多文件请求。由于性能原因，我不想一开始就获取它。我想在访问特定应用程序的路线时加载它们。

我目前正在与 Module Federation 探索微前端。我刚刚分叉了一个沙箱，当两个模块都可用时尝试成功。它有 2 个模块，app1作为主机和app2作为远程组件。但由于我认为模块联合中的每个模块应该是独立的，因此我尝试使该模块app2不可用，因为我没有启动它。因此，当我运行 时app1，我遇到了错误，它完成了加载并显示了 React 的后备Suspense，但几毫秒后，它变成空白，因为存在我无法检索的错误，因此我真的不知道。

之后，我尝试了 Webpack 的Promise Based Dynamic Remotes，然后我的webpack-config.js变成了这样：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
const path = require('path');

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader', …

嘿，我在我的 React 项目中使用 React 微前端和 webpack 模块联合。根据微前端结构更改文件夹结构后，处理模块的常见依赖关系面临一些困难。

出现以下错误：

    ERROR in resolving fallback for shared module react
    Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/guru/project/microfrontend/modules/metronic/layout/components/subheader/components'
    ERROR in resolving fallback for shared module react
Module not found: Error: Can't resolve 'react-router-dom' in '/Users/admin/Desktop/guru/project/microfrontend/modules/metronic/layout/components/subheader/components'

这里我分享一下我的代码结构

1. 网络包
2. 包.json
3. 文件夹结构

网页包：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
require('dotenv').config({ path: '../.env' });

module.exports = {
  // the output bundle won't be optimized for production but …

我正在创建一个反应本机应用程序，并且该应用程序具有许多模块，例如

• 登录模块
• 支付
• 大车
• 产品等

所以我想每个模块都遵循微前端架构。我在互联网上搜索过但没有找到任何东西。所以我想知道是否有可能实现 React-Native 应用程序的微前端架构。如果是的话怎么办？