0

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

目前我们正在为此使用 iframe，除了客户端浏览器所需的额外资源以及不那么动态和有限的方法之外，它的效果很好。

我的问题是，是否可以在 Angular 应用程序中实现一个共享且众所周知的组件接口的组件，从另一个 URL 动态加载；在我们的例子中子域？

例如，我们有以下域：

  1. 域名.com
  2. sub1.domain.com
  3. 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）也是如此。

非常感谢您！

4

1 回答 1

1

当谈到 Angular 时——我已经通过几种不同的方式看到了这一点，每一种都有自己不同的陷阱，而且我个人不喜欢这两种选择，原因之一是——它们使开发和/或部署变得更多复杂而不是简化。对我来说，它破坏了微前端的目的。

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

以下是有关该主题的大量资源（包括示例，包括 Angular）：

于 2021-03-01T15:26:43.633 回答