问题标签 [micro-frontend]

我一直在尝试实现单水疗地块，但我遇到了以下异常

错误是关于一个 mountParcel 属性，它的属性被传递到了包裹中，我已经从单水疗库中提取了它，但我仍然遇到同样的问题，我一直在与这个问题作斗争一段时间，请协助

请在下面找到我的代码

包裹配置.js

MyParcelComponent.js

单水疗应用。尝试消费包裹

包.json

我正在尝试使用采用 Web 组件方法的微前端创建一个演示应用程序。我需要做什么才能将定义的自定义元素从一个微前端用于拼接层？

我已经采用了 IFrame 路线并使用了单水疗，这两种方法都可以使用，但这次我尝试使用 Web 组件，但没有成功。我还尝试将微前端添加到 docker 容器中，但这并没有带来任何改变。

我在微前端中定义我的自定义元素，如下所示：

我在微前端使用它index.html：

到目前为止一切正常。当我尝试从拼接层使用它时，我的问题就出现了。

在 React 应用程序中，我创建了一个server.js文件来传递内容：

从拼接层，创建一个指向微前端的代理：

并在拼接中像这样导入它index.html：

我期望 web 组件在拼接层中渲染 react 组件，就像我在隔离运行微前端时所做的那样，但实际结果是所有代码都在linkhtml 导入标签下并且没有渲染任何内容在 web 组件标签下。

Web 组件微前端

web组件拼接层

我们有用 angularjs 编写的大型企业应用程序。

现在我们必须迁移到 Angular，因此我们排除了混合方法的选项，Angular 建议使用“ngUpgrade”。

所以现在我们正在用 Angular 创建一个新的应用程序，这意味着我们有 2 个应用程序“angularjs(old)”和 angular(new)。

因此，无需使用 angular-spa 刷新即可在这两个应用程序之间进行切换。

我试图找出是否存在另一个框架，在两个应用程序之间导航时无需刷新（无需通过导航到新的 html 来刷新整个页面）。

所以我正在努力将我公司的应用程序迁移到微前端方法。我们遵循https://micro-frontends.org/中描述的标准。虽然目前一切都在使用 React，但我们正在使用 Web Components 进行包装，以便我们在未来拥有与框架无关的自由和灵活性。我们已经建立并运行了一个工作架构，到目前为止它运行良好。我们甚至在 Web 组件规范之上创建了一个花哨的兼容性层，它允许我们将类似 React 的 props 传递给 Web 组件，包括对象、数组甚至函数。这允许它们之间更好的交互。

我们现在主要关心的是库的重复。我们是一家 React 商店，所以即使我们有这种与框架无关的方法，一切都在使用 React。虽然这种新方法使我们能够将应用程序的各个部分单独升级到更新的 React 版本（最终），但我们仍然不喜欢 React 库的如此多重复的想法。

换个角度来看，即使是 Gzipped，React/ReactDOM 也超过 40kb。单独来说这是非常小的，但按比例放大它开始占用越来越多的带宽。RAM 方面问题不大，这些库大约 130kb，鉴于现在大多数设备的 RAM 容量，这并不是什么大问题。

但是，当然，我们希望事情尽可能优化和简化。所以我希望有人可以为微前端应用程序（包装在 Web 组件中的应用程序）提出一种方法，以便从父应用程序中获取 React 和其他库。

您应该知道父应用 JavaScript 在微前端之前加载。每个微前端都通过<script>标签加载。最后，我们目前没有使用 Shadow DOM，这是我们为了将现有代码迁移到新的微前端架构而做出的权衡。

我玩 Angular Elements 已经有一段时间了。我们的团队正在构建多个独立的 Angular 项目并将它们转换为 Angular Elements。我们还构建了一个主外壳，这些角度元素将在主外壳中调用。

主外壳由 Angular 编写。到目前为止，我发现我只能将角度元素嵌入到index.html主外壳中。但是，我想知道有没有办法在 中使用角度元素app.component.html？

mainShell 中的 index.html ：在这里可以正常使用app1-element。

角度项目结构如下所示。那么如何使用app1-element呢app.component.html？我在那里使用类似的代码，但它不起作用。顺便说一句，要运行主 shell，我使用Go LivefrommainShell/src

提前致谢！

对于上述方法，应该使用 Angular 7 + single-spa 组合 ( https://single-spa.js.org/ )。基本上，我希望能够：

1. 每个微应用程序的单独存储库
2. 每个应用程序将由不同的团队管理
3. 每个应用程序可以/或不能是独立的
4. 将所有应用程序组合在一起的根应用程序

我们可以使用 Angular 7 来实现这一点，但方向突然变成使用 Angular 8。Single-spa-angular 还不支持 Angular 8，恐怕我们不能等那么久才能得到支持，正在跟踪问题在这里：https ://github.com/CanopyTax/single-spa-angular/issues/83

Angular 8 无法导入已构建的应用程序。或者至少我是个菜鸟，我不知道。

是否可以动态导入预编译的苗条组件或整个苗条的应用程序。

以及何时，如何在 svelte 3 中编译单个组件。我找到了这种方法，但文档中没有： https ://github.com/sveltejs/svelte/issues/1576

我想将一个页面上的几个独立（托管）Svelte 应用程序组合到一个更大的 svelte-app（微前端）。目标是，每个子应用程序都可以独立部署和托管在任何地方（可能是自己的 docker 容器）。并且任何更改都应该在聚合器应用程序中可见，而无需重新编译。

我想我要做这样的事情： https ://single-spa.js.org/docs/separating-applications.html 但没有其他框架，这让我的应用程序和组件感到震惊。

我不想使用自定义组件，因为 Shadow DOM 的样式不灵活。我必须能够在全局样式表上更改 css。

有人有想法吗？

谢谢 ：）

我们目前有一个问题，我们想动态创建一个模块(moduleFactory.create(this.injector))。但是动态创建的模块的注入器没有父注入器的提供者。我们希望在我们的集成/主应用程序（创建子模块的地方）中实现一些核心内容，将其放入根注入器中，并希望通过 DI 将其放入我们的子模块和组件中（通过注入器，它是用主应用程序的注入器作为父级）。

我们基于这个例子的实现：https ://stackblitz.com/edit/angular-ifs7sp?file=src%2Fapp%2Flazy-loader.service.ts

简而言之就是使用fetchSubsystemsSystemJS 导入单个 bundle 文件并返回导出的 AppModule：

在子系统中我们要使用该服务：

I18nisInjectionToken和II18n定义了服务的接口：

不幸的是，我们得到了一个错误，即注入器中没有这样的 InjectionToken：

表达我们的意图（如果有更好的解决方案，我们还没有找到）：我们想要一个类似“微前端”的东西。我们希望有一个集成或主应用程序，它提供核心应用程序和应用程序的基本布局。我们有多个“子系统”，即为特定业务逻辑提供 GUI 的小应用程序（是的，一种经典的微服务架构）。所以根据这个，在构建子系统的时候，GUI就已经构建好了。子系统将 GUI 作为单个包提供，集成应用程序应加载该包并将其安装到应用程序中。

我有一个任务。

拥有单水疗框架的微前端。

1. 门户/主应用程序（通过 url 加载所有其他 js 代码）
2. 微前端 1（基于反应）
3. 微前端 2（基于反应）

所以我的问题只有一个：我不想复制像 react、react-dom （任何其他）这样的供应商库。我想让它们在其他微前端（与 webpack 捆绑）中共享

我知道拥有一些全球性的东西是什么不好的做法（它违反了与 webpack 捆绑的整个想法）。但是如何解决供应商库的重复问题呢？

我发现一个解决方案只是使用 SystemJs 加载体面，例如 html 中的分隔标签，但我只是想知道是否还有另一种解决方案。

谢谢你。

SystemJs 方法通过需求加载依赖项，但从 CDN，我只想做同样的事情，但从“共享”webpack 包加载所有依赖项，并带有 react 和其他东西。

我有一个带有父组件和多个子组件的反应应用程序。每个孩子代表一个带有清单的不同应用程序。

我想在每个应用程序清单中有一些重要的应用程序数据（如路由名称），并让主机应用程序读取它们。

主机应该能够使用路由器使用manifest.location.

我想避免必须在主机中维护当前应用程序的列表，以便代码尽可能可重用。

我在想的是做某种 Webpack 过程来识别清单的路径，然后动态生成这些导入。

我不知道我提出的解决方案是否可行。有没有更好的方法来使用 Webpack 实现这种功能？你能指出我正确的方向吗？

谢谢。