问题描述
我正在研究使用 Angular 进行微前端的可能性。我正在研究将 UI 的不同部分独立地由他们自己的 HTTP 服务器进程提供服务但在主 UI 上动态组合的可行性；这只是一个 UI 模板，其中的占位符将被这些动态加载的微前端替换。
目前我们为此使用 iframe，除了客户端浏览器所需的额外资源，当然还有不那么动态和有限的方法。
我的问题是，是否有可能在 Angular 应用程序中实现一个共享且众所周知的组件接口的组件，从另一个 URL 动态加载；在我们的例子中是子域？
例如，我们有以下域：
- domain.com
- sub1.domain.com
- sub2.domain.com
并且我们可以从 sub1.domain.com 获得以下组件：
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'sales-frontend',templateUrl: './sales-frontend.component.html',styleUrls: ['./sales-frontend.component.css']
})
export class SalesFrontEndComponent implements SharedInterface,OnInit {
constructor() { }
ngOnInit() {
}
}
是否可以从 sub1.domain.com 在 domain.com [主 UI] 上动态加载它？
同样适用于另一个组件，例如 sub2.domain.com 提供的 ProductsFrontEndComponent。
非常感谢你！
解决方法
谈到 Angular - 我已经看到这以几种不同的方式完成，每一种都有自己不同的陷阱，我个人不喜欢这两种选择，原因之一 - 他们已经进行了开发和/或者部署更复杂而不是简化它。对我来说，它违背了微前端的目的。
如果您有个人认为“足够好”的东西，我会坚持下去，直到 Webpack Module Federation 完善为止。简而言之 - 模块联合允许轻松引用编译时未知的模块，这应该完全涵盖您的情况。
以下是有关该主题的大量资源（包括示例，包括 Angular）：