问题标签 [micro-frontend]

有没有可能从 WebPack 调用其他 React 应用程序的方法？我目前正在使用微前端，我需要一种从另一个调用项目的方法，一个微前端应该调用另一个。我的意思是：家微前端：localhost:8080 Timeline微前端：localhost:8081 我需要在同一个Home微前端中像SPA一样显示Timeline微前端

有没有可能使用 WebPack 或其他反应的方法来做到这一点？我需要运行所有这些，或者至少在它们之间使用相同的状态，我使用 IndexdedDB 来共享状态，所以，不同的端口会破坏状态，所有这些都应该是相同的。

我已经使用 Angular 创建了微服务。我使用 ngx-build-plus:build 在单个 es2015 模块中构建它。所以，我有一个问题。如何@import '@angular/material/prebuilt-themes/deeppurple-amber.css'以某种方式导入 CSS 文件 ()，以便在所有 dom 元素之间共享该文件中的样式。

Fe，我的微服务中有 Dialog 组件，它取自 Angular 材料。如果我打开对话框，它会添加<div class="cdk-overlay-container"><div>为 BODY 元素的第一个子元素。所以，它比我的微服务应用程序更高。

所以，我只是想让从导入的文件中获取样式并将其应用到 .cdk-overlay-container 成为可能。我怎样才能做到这一点？

我试图在我的微服务主要组件的 SCSS 中导入这个 CSS 文件，我还试图为我的应用程序制作 shadow dom 等。没有任何帮助。

我们的平台建立在带有 Web 组件的微前端架构上。我们对其中一些使用 Stencil，这意味着我们在一个网页中有多个 Stencil 应用程序。此外，我们还有一个 UI 库，也是用 Stencil 构建的，我们希望在这些微前端组件中使用它。

我们想使用 Stencil UI 库作为 Stencil 微前端组件的构建时依赖项。但是由于标签名称冲突，这目前是不可能的：

理论上，两个微前端可以发布两个不同版本的 UI 库。但是，在运行时，它们会发生冲突，因为它们都试图用customElements.define. 当然，这不会发生，因为 Stencil 在注册新名称之前会检查现有名称 - 但结果同样糟糕：第一个加载的组件总是获胜，如果它是旧版本或具有不同的 API，其他组件会破裂。

一个解决方案是在构建或运行时命名空间/为标签名称添加前缀，但网络标准中没有任何内容（尚未）。虽然namespaceStencil 中有一个配置选项，但这似乎并不能解决此类问题。

使用纯 ES6，我们至少可以做到以下几点（即注册一个带有动态标签名称的自定义元素）：

而且我确信我们可以使用某种构建时解决方案和 Webpack 等来实现相同的目标。

但是 Stencil 是否有类似的可能？或者还有什么办法可以解决这个问题？

假设我管理 2 个使用 Webpack 构建的 JavaScript 项目：

• 一个叫做用户网站的网站
• 一个名为External-Module的 JavaScript 模块

请注意，出于与微前端架构所述相同的原因，我使用了 2 个单独的项目。

我希望我的用户网站能够按需动态加载外部模块（使用任何 JavaScript 模块技术）。我的User-Website在构建时知道到达External-Module的 URL 。

我可以选择User-Website和External-Module所需的任何技术。

我正在寻找解决方案：

• 这很容易实现（也许 Webpack 已经处理了 JSONP 来动态加载块？）
• 这不会增加User-Website和External-Module的开销（例如JavaScript 模块看起来不错，但需要大量的 polyfill）

我的问题与https://github.com/webpack/webpack/issues/7526有关

我尝试在我的External-Module上使用 JSONP 库输出，但我不知道如何在User-Website中加载它。

我也在考虑在User-Website中使用SystemJS来动态加载External-Module：

• 我还可以用 Webpack 中的 SystemJS 替换内部 JSONP 机制（以节省在 m 包中使用 JSONP 机制）。
• SystemJS看起来比RequireJS更好更现代
• 这将需要添加SystemJS（s.js仅）开销。我正在尝试尽可能少地使用依赖项。

我正在使用角度自定义元素来构建一个应用程序，其中 MatDialog 是自定义元素的一部分。我在主机应用程序中也有一个 MatMenu。问题是，当我在页面加载时打开 mat-dialog，然后打开 mat-menu，mat-dialog 之后就不起作用了，否则如果我先打开菜单，然后再打开 mat-dialog，则菜单不起作用工作了。

您可以在以下位置找到 stackblitz：https ://stackblitz.com/edit/angular-nr58ab-tbu38h

我在 index.html 本身中添加了 MatDialog 应用程序的 main.js 代码。main.js 是在 prod 模式下使用 ngx-build-plus 构建应用程序后生成的，输出哈希为 none 且单包为 true。

MatDialog 应用程序代码如下：

app.module.ts

app.component.ts

和 app.component.html

这是我在 stackblitz 中构建并放入应用程序的 index.html 中的应用程序。

我已经坚持了一段时间，我也尝试在 NgZone.run() 中运行 dialog.open() ，但也没有运气。谢谢。

尝试在 Azuredev 操作上使用 Docker 为 Angular 7 创建构建。但得到错误。

如果我更改 package.json 中的 CLI 版本，它可以正常工作。但是在创建构建时给了我其他错误。

由于应用程序是使用 single-spa 创建的，因此 CLI 版本更改需要在多个位置进行更改。

任何人都可以处理这个并确认我的任何解决方案吗？

我在 shell 应用程序中使用 Vue Web 组件时遇到问题，这个 shell 应用程序也是在 Vue 中开发的。

我的 Vue Web 组件有自己的 Vue 路由器，并且在我编写的这个 Web 组件的 router.js 内部Vue.use(VueRouter)。同样，我的 shell 应用程序有自己的 Vue 路由器，我也在Vue.use(VueRouter)他们的 router.js 中使用了相同的路由器。

我在 shell 应用程序的文件中添加了我的 web 组件 js (webcomponet-project/dist/sample-web-component.js)，index.html如下所示：

现在当我启动 shell 应用程序时，我收到以下错误？

我能做些什么来摆脱这个错误？

我想使用从Single SPA ( customProps )传递的道具启动我的 React微应用。我想出的唯一方法是：

这确实有效（我可以在我的组件中看到并使用传递的道具），但我对根组件在调用singleSpaReact(1) 和调用bootstrap(2) 之间发生变化这一事实并不完全满意。会不会有我现在没有看到的副作用？有谁知道更好的方法？

我遇到了一个问题，下面是场景：

我开发了一个vue 应用程序（my-admin 微应用程序） ，它有 4-5 个屏幕/组件（管理用户、管理通知、管理角色等），并且我创建了一个router.js，我在其中编写了以下内容：

我在我的main.js中导入了这个路由器对象，如下所示：

最后我将我的这个微应用程序作为 web 组件（MainLayout 组件）包装在 main.js中，如下所示：

我使用以下命令构建了这个微应用：

这就是这个微型应用程序的全部内容。如果我单独运行这个微应用程序，它运行得很好。

但在我的场景中，我有一个仅在 Vue 中开发的 shell 应用程序（my-shell）。并且这个 shell 应用程序也有自己的 vue 路由器，并在其 main.js 中导入，如下所示：

. 外壳路由器：

我将此路由器对象导入到 my-shell 的 main.js中，如下所示：

在 my-shell 的 index.html 中，我添加了标签（在里面）来加载我的微应用程序 buid（my-admin.js 文件），如下所示：

但是当我启动 my-shell 应用程序时。它抛出以下错误：

我能做些什么来摆脱这个错误？

最近我们的团队决定在我们的遗留产品中实现微前端架构。它是使用 Asp.Net aspx 页面和 javascript/jquery 开发的。

去年我们开始在我们的应用程序中使用 Angular 来获取一些视图。为了加载 angular，我们将 prod 构建文件放在 .net 项目中，并且我们在 aspx 母版页中加载组件。

我们计划使用微前端架构将我们剩余的未决旧视图迁​​移到 Angular。

因此，我为此做了一个小型 poc，并且能够将架构实现到接近它的某个地方。

我按照这个 url 执行并在端口 4400 上运行它。

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

在我现有的角度项目中，我正在使用 customElements 加载它

这可以按预期工作，我可以在我的开发环境中加载 customElements。但是对于生产我真的不确定如何实施。

我的顾虑：

1. 我是否也必须在 prod 的某个端口上运行应用程序？如果是，如何做到这一点，它是否可以是动态的，以便用户能够更改端口。我们在 .net 应用程序中的方式。由于客户端可能已经在该端口上运行了一些东西

2. 我试图实现的方式是否正确。

提前致谢。