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

我的micro-app-a有自己的角度路由器来管理路由，同样，micro-app-b也有自己的角度路由器，它们可以按预期单独工作，但是当我将这两个微应用程序合并为一个时，我无法管理路由web 组件 (@angular/element)到单个 shell 应用程序中。我不知道如何管理路由。请有知识的人在这里帮助我。:)

我有一个反应本机应用程序和另一个 android 应用程序。我需要开发一个可以集成到两个应用程序中的微应用程序。（移动环境）

我听说过电极反应原生。但我什至找不到 Hello world 应用程序或集成到另一个应用程序的步骤。

你们能告诉我一个解决方案吗？

我目前正在开发两个不同的 React 应用程序，它们使用 Deck.GL 来渲染两个地图，每个地图都有不同类型的图层。当它们作为独立使用时，它们都可以完美地工作，但是，当两者安装在同一个父应用程序中时，我访问的第二个地图崩溃（由于两次左右加载库）。

鉴于此，我将 Deck.GL 添加到两个应用程序的 Webpack 外部，并添加了一个指向父应用程序的 unpkg 链接。但是，这给出了“无法解析‘h3’”错误，所以我也将 h3-js 放在了外部，但它一直在 Deck.GL javascript 上搜索它。我的下一步是从@deck.gl/core、@deck.gl/react、@deck.gl/layers 等导入，只加载需要的内容，但在搜索 ' 时出现类似错误@deck.gl/layers 中的亮度'。

那么，我如何正确地将 Deck.GL 定义为 Webpack 外部？

编辑：

将 deck.gl 添加到外部时出现的错误：

无法从https://unpkg.com/deck.gl@7.3.6/dist.min.js解析裸说明符“h3”

当我导航到使用不同图层的第二张地图时出现错误： 似乎在使用 Angular 路由浏览页面时会启动此错误，如果我使用简单<a href>，它们可以完美工作，因为它会重新加载整个页面并且不会加载两个实例的图书馆。

我们的项目中有一个要求，我们必须将 2 个或多个子 Angular 应用程序组合成一个容器 Angular 应用程序，通过我们想要制作单页 Angular 门户。

优点：

1. 我们可以维护不同的代码仓库
2. 不同的团队可以在自己的代码仓库上工作，他们可以独立工作。

所以我们决定使用 spring Gateway 来实现这一点，我们希望在其中执行以下过程：

第 1 步：创建 spring 网关应用程序并配置路由

setp 2：创建主容器角度应用程序（运行在：8080 端口） setp 3：创建子角度应用程序（在端口 8081 上运行）

当我们通过容器应用程序访问子应用程序时，我们希望通过 api 网关导航，该网关将进一步访问配置的路由并为子应用程序提供服务。

--> 至此，创建容器应用程序和配置网关部分已完成。--> 现在的问题是：

如何将整个子应用程序导出为模块，以便我的容器应用程序认为它是通过网关加载子模块而不是真正的角度应用程序。

有没有可能这样做？这对我们很有帮助！

我使用带角度的单水疗中心。我有一个外壳和一个子应用程序，当我的子应用程序具有延迟加载的模块时，RootModule 加载了加载 SubModule 的加载 SuperSubModule。所有这些路由都是延迟加载的路由。当我在没有 single-spa 和 single-spa webpack 配置的情况下为我的应用程序提供服务时，这可以正常工作。但是当我在生产模式和 aot 下构建我的应用程序时，当我导航到该 url 时，延迟加载的路由 SubModule 到 SuperSubModule 会出错。错误是：

错误错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“调用”类型错误：无法在对象的ZoneDelegate.invoke（zone.js：396）处读取未定义的属性“调用”（引导程序：63）。 onInvoke (main.js:1) 在 ZoneDelegate.invoke (zone.js:395) 在 Object.onInvoke (core.js:39699) 在 ZoneDelegate.invoke (zone.js:395) 在 Zone.run (zone.js: 153) 在 zone.js:894 在 ZoneDelegate.invokeTask (zone.js:431) 在 Object.onInvokeTask (main.js:1) 在 resolvePromise (zone.js:836) 在 resolvePromise (zone.js:795) 在 zone .js:897 在 ZoneDelegate.invokeTask (zone.js:431) 在 Object.onInvokeTask (main.js:1) 在 ZoneDelegate.invokeTask (zone.js:430) 在 Object.onInvokeTask (core.js:39680) 在 ZoneDelegate .invokeTask (zone.js:430) 在 zone.runTask (zone.js:198) 在 drainMicroTaskQueue (zone.js:611)

当我再次单击该模块的 url 时，错误是：错误错误：未捕获（承诺中）：错误：未找到“未定义”的 NgModule 元数据。

错误：未找到“未定义”的 NgModule 元数据。在 lg.resolve (compiler.js:20900) 在 Th.getNgModuleMetadata (compiler.js:20029) 在 Jg._loadModules (compiler.js:25824) 在 Jg._compileModuleAndComponents (compiler.js:25807) 在 Jg.compileModuleAsync (compiler .js:25769) 在 useClass.compileModuleAsync (platform-b​​rowser-dynamic.js:223) 在 c.project (router.js:6406) 在 c._tryNext (mergeMap.js:46) 在 c._next (mergeMap.js :36) 在 c.next (Subscriber.js:50) 在 resolvePromise (zone.js:836) 在 resolvePromise (zone.js:795) 在 zone.js:897 在 ZoneDelegate.invokeTask (zone.js:431) 在Object.onInvokeTask (main.js:1) 在 ZoneDelegate.invokeTask (zone.js:430) 在 Object.onInvokeTask (core.js:39680) 在 ZoneDelegate.invokeTask (zone.js:430) 在 Zone。

有人知道如何解决这个问题吗？欢迎任何反馈，我已经被这个问题困扰了好几天了。提前致谢！编辑：这只发生在生产模式和使用单水疗时，而不是在生产模式下独立服务时。

我们希望在一个单页应用程序下呈现几个 Web 应用程序（angular 7+）。我们正在寻找一个可以使用的微前端架构/框架。正如我们所看到的，这些是我们的实施选项：

使用 single-spa 开源框架：https ://github.com/CanopyTax/single-spa 使用 Iframes（友好的 Iframes）托管应用程序（shell）并根据当前 URL 加载每个应用程序。使用网络组件。其他？当前状态是一个单体 FE 应用程序，它通过 IFRAME 将另一个子应用程序作为内部应用程序使用（这种方法对我们来说是不可扩展的，因为托管应用程序将所有产品构建在一起，并且没有真正分离。）

我们的要求是微前端的通常要求： 独立开发 - 每个团队都可以在自己的 repo 上工作并构建他们的产品，而不管其他产品如何。

独立部署 - 每个应用程序都可以在生产中升级而无需停机，也不会干扰其他应用程序。

共享组件——我们在我们的应用程序中使用 Angular7，并且我们已经编写了一个专有的第三方库（共享组件和逻辑），应该在所有产品之间共享以实现相似的外观和感觉。

我们希望能够在不关心其他应用程序的情况下升级每个应用程序的框架（Angular、RXjs、Typescript 等以及我们的专有组件库）。

我们尝试使用 single-spa 框架，但我们遇到了一些问题，目前我们发现自己在思考这是否适合我们，或者我们是否应该尝试不同的方法。

我们使用单水疗的问题是：

1. 资产加载是有问题的。（我们必须在托管应用程序的根文件夹中拥有资产文件，并且在切换到另一个应用程序时会遇到资产冲突）。
2. 我们仍然不知道如何处理所有应用程序的全局样式（我们使用 sass 进行样式设置，它必须与每个应用程序的本地样式一起遵守）
3. 升级 Angular 框架（或所有其他框架）对于一个应用程序来说是不可能的，它是全有或全无（因为我们有一个 Angular 实例）。
4. 我们必须实现不同的捆绑来开发托管应用程序的另一端（外壳）。

当我们考虑Iframe（使用友好的 Iframe）解决方案时，我们可以想象所有子应用程序之间的完全分离。通信仅通过帖子消息进行。在这种方法中，我们可以将 UI 代码从中分离出来，并使 APIS 单独通过 IFRAME 工作

使用 iframe 有什么陷阱吗？

更通用的实现是使用自定义元素创建Web 组件，但我们需要支持不支持原生封装的 IE11 和 Edge，因此我们需要在使用它的每个站点中测试我们的应用程序，以确保它们没有破坏我们的风格，我也不知道 Web 组件是否可以管理子路由。

理想的解决方案应该允许我们的父应用程序通过路由请求子应用程序，而它们之间在资源和资产方面没有任何耦合，并且在这些方面应该是独立的。我们需要的另一个主要特性是这些应用程序应该有一个通知机制。

提前致谢。

我们正在使用微前端框架piral。对于我们的 pilet，我们希望提供一个自定义 api。按照教程，我们想出了这样的代码

虽然这似乎在功能上有效，但我们无法让它与 typescript 一起使用。我们做错了什么？我们如何在我们的桩中也提供打字？

我正在通过遵循微前端架构来创建一个大型应用程序。比方说，我已经将我的整个应用程序分为 5 个微应用程序（micro-app-A（在 Vue 中）、micro-app-B（在 Vue 中）、micro-app-C（在 Angular 中）、micro-app-D（在 React 中）和一个 shell 应用程序 My-App-Shell（在 Vue 中））

我使用pubsub-js库（一个用 JavaScript 编写的基于主题的发布/订阅库）在微应用中的不同组件之间进行通信。我的每个微应用都完美地使用了这个 pubsub 系统在它自己的组件之间进行通信。但我需要一个通用的 pubsub 系统（由我的 shell 应用程序管理）来在不同的微应用程序之间进行通信。

如何做到这一点？

我需要帮助配置使用 Vuex、Vue-Router 和 Vue i18n 的微前端应用程序的构建/分发。

TL;DR：我在构建将导入现有系统的微前端应用程序时遇到问题。我们的团队尝试通过“vue-cli-service”和“@vue/web-components-wrapper”将应用程序构建为 web 组件，但两种方法都失败了，因为构建入口点必须是 .vue 文件（Vue 组件）和我们不能在 .vue 文件中注入 Vuex / Vue Router 和 Vue i18n 作为 vue 实例选项。我们也尝试过构建为 lib，但在加载块时会出错。

简而言之，与我合作的团队正在创建一个独立的应用程序，旨在可在现有系统上注入。由于应用程序必须与技术无关，因此团队选择使用以 vue 作为框架的微前端架构。应用程序使用Vuex和Vue Router处理内部数据和导航，用户在应用程序不同模块上提供的数据被发送到一个api进行处理和存储。

该项目是使用 Vue CLI 创建的，目标是将应用程序包装在一个 Web 组件上，该组件可以在其他系统上导入和使用。问题是，在为生产构建时，vue-cli-service 要求 webcomponent 构建目标的入口点是 .vue 文件（https://cli.vuejs.org/guide/build-targets.html#web- component )，但这使我们无法注入 vuex、vue-router 和 i18n 配置，因为我们无法创建新的 vue 实例。

我们还尝试使用“@vue/web-component-wrapper”在 main.js 上定义一个 web 组件，但这不起作用，因为 vue 实例（新 Vue）没有定义渲染或模板。这种方法还要求入口点是 .vue 文件或组件构造函数。

目前，我们正在尝试将模块导出为 lib，它应该返回 Vue 实例（仍然未挂载），然后可以将其挂载到消费者定义的 div 上，但消费者在加载捆绑块时出错。我相信这可能是因为 vue.config 文件上没有配置 publicPath，但是我们不能进行这样的配置，因为应用程序应该完全不知道它的使用位置。

这是基础项目文件

main.js

应用程序.vue

哪个是微前端开发的最佳方法/框架？

我有超过 5 个基于 angular、react 和 vue 的应用程序，并希望在单个 UI 上显示所有 5 个应用程序。我们有许多微前端框架，如单一 spa、piral、moisaic 项目、Podium 等等。现在市场上有售。需要一张清晰的图片来帮助我使用任何框架来实现它。

微服务#前端开发