Angular 跨域动态组件加载器

Question

我正在使用 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.comdomain.com[main UI] 上动态加载它？

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

非常感谢修道院！

Answer 1

说到 Angular - 我见过以几种不同的方式完成此操作，每种方式都有自己不同的陷阱，我个人不喜欢这两种选择，原因有一个 - 它们使开发和/或部署变得更加复杂而不是简化它。对我来说，它破坏了微前端的目的。

如果你个人有一些“足够好”的东西，我会坚持下去，直到 Webpack Module Federation 被完善。简而言之 - 模块联合允许在编译时轻松引用未知的模块，这应该完美地涵盖您的情况。

下面是关于该主题的一堆资源（包括示例，Angular 包括在内）：

Angular 跨域动态组件加载器

Angular cross-domain dynamic component loader

angular

cross-domain

dynamic-loading

micro-frontend

angular-lazyloading