角度跨域动态组件加载器

Question

我正在使用Angular研究微前端的可能性。我正在研究让UI的不同部分由它们自己的HTTP服务器进程独立提供服务，但在主UI上动态组合的可行性；主UI只是一个UI模板，其中的占位符将被这些动态加载的Micro-Frontend替换。

目前我们正在使用iframe，除了客户端浏览器所需的额外资源外，它工作得很好，当然也不是那么动态和有限的方法。

我的问题是，是否有可能在一个Angular App中实现一个共享的和众所周知的组件接口，从另一个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() {
  }
}

是否可以将其动态加载到domain.com上

主UI

从sub1.domain.com？

另一个组件也是如此，比如sub2.domain.com提供的ProductsFrontEndComponent。

非常感谢修道院！

Answer 1

当涉及到Angular时-我已经看到了几种不同的方式，每种方式都有自己不同的陷阱，我个人不喜欢这两种选择，因为一个原因-它们使开发和/或部署变得更加复杂，而不是简化它。对我来说，它违背了微前端的目的。

如果你有“足够好”的东西，我会坚持到

Webpack模块联盟

被擦亮了。简而言之，模块联合允许轻松引用在编译时未知的模块，这应该可以很好地涵盖您的情况。

下面是关于这个主题的一堆资源(包括示例，包括Angular )：

https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669

https://github.com/module-federation/module-federation-examples