我们目前有一个问题，我们想动态创建一个模块(moduleFactory.create(this.injector))。但是动态创建的模块的注入器没有来自父注入器的提供者。我们希望在我们的集成/主应用程序（创建子模块的地方）中实现一些核心内容，将其放入根注入器，并希望通过 DI（通过注入器，由主注入器创建）将其放入我们的子模块和组件中应用程序的注入器作为父级）。
我们的实现基于这个例子：https : //stackblitz.com/edit/angular-ifs7sp?file=src%2Fapp%2Flazy-loader.service.ts
const subsystems = await this.fetchSubsystems()
const promises = subsystems
.map(async (subsystem) => await subsystem.load())
const subsystemModuleFactories = await Promise.all(promisses)
subsystemModuleFactories.map(async (ngModuleOrNgModuleFactory) => {
let moduleFactory: NgModuleFactory<any>
if (ngModuleOrNgModuleFactory instanceof NgModuleFactory) {
moduleFactory = ngModuleOrNgModuleFactory
} else {
const compiler = this.injector.get(Compiler)
moduleFactory = await compiler.compileModuleAsync(ngModuleOrNgModuleFactory)
}
const entryComponent = (<any>moduleFactory.moduleType).entry
const moduleRef = moduleFactory.create(this.injector) // create the module ref with the injector of the main app as parent of the subsystem module …我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。
如果我只是移动 '@angular/compiler' 它也可以工作，但是当外部化 '@angular/core' 和其他人时，我Can't resolve all parameters for ApplicationModule: (?) at at syntaxError (util.ts:100) at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.ts:957) ...在引导应用程序时收到错误。
我使用的文件是您可以在 unpkg.com 中找到的 8.2.14 UMD 包，我的外部文件是：
[
/^@example\,
/^rxjs$/,
/^rxjs\/operators$/,
/^@angular\/core$/,
/^@angular\/compiler$/,
/^@angular\/common$/,
/^@angular\/common\/http$/,
/^@angular\/forms$/,
/^@angular\/platform-browser$/,
/^@angular\/platform-browser-dynamic$/,
/^@angular\/router$/,
/^zone\.js$/,
/^single-spa$/
]
rxjs 包是在https://cdn.jsdelivr.net/npm/@esm-bundle 中找到的包。
您可以在此 repo 上看到错误：https : //github.com/OriolInvernonLlaneza/test-share-angular
提前致谢！
编辑：多亏了 yurzui 的回答，这个错误得到了解决。但是，我现在收到另一个错误：
Class constructor I cannot be invoked without 'new'
at new EventEmitter (event_emitter.ts:78)
at new NgZone (ng_zone.ts:97) …webpack webpack-externals angular micro-frontend single-spa-angular
我了解如何在使用时将自定义道具传递给不同的微应用程序single-spa，但我想知道如何获取 api 调用表单 app1 的输出并在 app2 中使用它。app1 正在使用react-redux，app2 将使用react hooks。
import {registerApplication, start} from 'single-spa'
registerApplication(
'navBar', // Name of this single-spa application
() => import('./nav/navbar.app.js').then(module => module.navBar),
() => true
)
registerApplication(
'app1', // Name of this single-spa application
() => import('./root.app.js'),//loadingFunction, // Our loading function
() => true, //activityFunction // Our activity function
)
registerApplication(
'app2', // Name of this single-spa application
() => import('./app2/app2.app.js').then(module => module.app2),
location =>
location.pathname === '/app2' …在我的网站中，我有一个按钮可以在特定的 div 中启动反应应用程序。当我点击它时，我创建一个反应根 div 并在里面渲染反应应用程序。关闭它的正确方法是什么？
<!--HTML from the website -->
<body>
<button id="btn">Launch React App</button>
<script type="module" src="/src/main.tsx"></script>
</body>
//main.js from the react App
import React from "react";
import ReactDOM from "react-dom/client";
import "./global.scss";
import App from "./App";
const btn = document.getElementById("btn");
btn.onclick = () => {
const root_div = document.createElement("div");
root_div.id = "root";
document.body.appendChild(root_div);
const root = ReactDOM.createRoot(root_div);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
};
我开始使用带有 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应用程序： …
routes react-router-dom micro-frontend webpack-module-federation
I\xc2\xb4m 将 Angular Web 分解为多个微前端。其中一个微前端负责处理购物车，并且它有一项服务来存储已添加的产品。我的 shell 微前端需要使用该服务在图标中显示汽车中有多少物品、添加新物品等。
\n我可以在微前端中使用存储在不同微前端中的服务吗？
\n我\xc2\xb4m 使用本教程，但它只解释了如何路由另一个微前端中的页面。
\n谢谢。
\n太长了；如何在反应微前端之间使用单一上下文？
应用程序分为多个微前端或反应应用程序。其中每个都在不同的端口上运行。容器正在托管其他微前端。每个都是一个单独的反应应用程序，并且它是一个运行时集成。（我使用martinfowler示例来实现微前端）
目前通过 URL 和浏览器存储（localStorage/cookies）将一些数据传递到其他微前端。
我需要使用 React Context 在这些 React 应用程序 (MFE) 之间传递数据。
我已经在容器（ReactApp1）中定义了 ReactContext Provider 并存储了值（比如 color=black）。要在较低级别的微前端 (ReactApp2) 中访问此颜色，我们需要可从任何微前端获取上下文。如何使其可用？
（注意：我不想使用 localStorage 或 cookie 进行全局数据共享）
<Container>
<LowerLevelMFE1/>
<LowerLevelMFE2/>
...
</Container>
我试图在微前端应用程序中传递这样创建的全局状态。但问题是我必须以某种方式“观察”更改，以便在 React 应用程序中设置 State。
全局状态.js
import { reactive } from 'vue'
const globalState = reactive({
counter: 0
})
export default globalState
在 Vue 微前端中，我这样做并且工作正常
import { createApp } from 'vue'
import App from './App.vue'
export default (rootEl, globalState) => {
const app = createApp(App)
app.config.globalProperties.globalState = globalState
app.mount(rootEl)
}
然而，在 React 应用程序中，我正确地传递了引用，但是当计数器值发生变化时，我必须以某种方式检测它并调用 setState 才能重新呈现更改。问题是我如何观察 Vue 生态系统之外的反应式对象引用的变化。
我正在尝试使用 webpack 模块联合构建 Angular Micro 前端。我已将所有自定义 webpack 文件添加到应用程序中。所有应用程序都构建良好。另外，当我尝试从各自的路径访问各个微前端时，它工作正常，但是当我尝试从 shell 应用程序访问各个微前端时，它会遇到无限刷新。我正在关注这篇文章作为参考。
不知道除了本文中提到的之外我还需要做什么。任何帮助都会得到帮助。
我正在使用 Single-Spa-Angular 库构建微前端。我使用“ng add single-spa-angular”创建了三个不同的子应用程序，其中两个应用程序工作正常，但一个应用程序显示以下错误：
Uncaught app2: Application 'app2' died in status UNMOUNTING: Cannot read property 'injector' of undefined
at http://<HOSTNAME>:4202/main.js:204363:53
和
Uncaught app2: Application 'app2' died in status SKIP_BECAUSE_BROKEN: In this configuration Angular requires Zone.js
at new NgZone (http://<HOST>:4202/main.js:68725:19)
at getNgZone (http://<HOST>:4202/main.js:69414:13)
at PlatformRef../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (http://<HOST>:4202/main.js:69312:22)
at http://<HOST>:4202/main.js:69356:59
谁能帮我吗。
谢谢沙希·布山·维尔玛
single-page-application angularjs-injector angular micro-frontend
我正在为我当前的项目使用单个 spa 并希望有一个加载程序，直到我的微应用程序被加载并且这些微应用程序之间会有一个切换，在这种情况下我也想显示一个加载程序。有没有办法达到同样的目标？
根据 single-spa 官方文档，我们可以使用 RxJs 共享应用程序的 UI 状态。
Observables / Subjects (RxJs) - 一个微前端向一个流发出新值，该流可以被任何其他微前端使用。它从其浏览器模块中将 observable 导出到所有微前端，以便其他人可以导入它。
链接：https : //single-spa.js.org/docs/recommended-setup/#ui-state
链接：https : //single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications
我试图在 React 中创建一个示例，其中我使用 single-spa 包裹将我的微应用程序包含在根应用程序中。我试图使用 RxJs 共享 UI 状态。当我在 google 上搜索 single-spa RxJs 时，我什么也没找到。谁能为我提供一个基本示例，我将能够为以下用例共享 UI 状态：
我目前正在开发一个使用 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 …rxjs angular micro-frontend webpack-5 webpack-module-federation
micro-frontend ×13
angular ×6
reactjs ×4
single-spa ×3
webpack ×2
javascript ×1
render ×1
root ×1
routes ×1
rxjs ×1
unmount ×1
vue.js ×1
vuejs3 ×1
webpack-5 ×1