更新5/24/2018:我们现在从我的原始帖子中获得了+3版本的Angular,但仍然没有最终可行的解决方案.Lars Meijdam(@LarsMeijdam)提出了一个有趣的方法,当然值得一看.(由于专有问题,他不得不暂时删除他最初发布样本的GitHub存储库.但是,如果您需要副本,可以直接给他发消息.请参阅下面的评论以获取更多信息.)
Angular 6中最近的架构变化确实使我们更接近解决方案.此外,Angular Elements(https://angular.io/guide/elements)提供了一些组件功能 - 尽管不是我在本文中最初描述的内容.
如果来自令人惊奇的Angular团队的任何人碰巧碰到了这个,请注意,似乎还有很多其他人也对这个功能非常感兴趣.积压可能值得考虑.
我想实现在一个可插拔(插件)的框架Angular 2,Angular 4,Angular 5,或Angular 6应用程序.
(我开发这个可插拔框架的具体用例是我需要开发一个微型内容管理系统.由于这里不一定详述的一些原因,Angular 2/4/5/6它几乎完全适合该系统的大多数需求.)
通过可插拔框架(或插件架构),我特别指的是一个允许第三方开发人员通过使用可插拔组件创建或扩展主应用程序功能的系统,而无需直接访问或了解主应用程序的源代码或内部运作.
(关于" 没有直接访问或了解应用程序的源代码或内部工作 "的措辞是一个核心目标.)
可插入框架的示例包括常见的内容管理系统,如WordPress或Drupal.
理想情况(与Drupal一样)是简单地将这些可插入组件(或插件)放入文件夹,让应用程序自动检测或发现它们,让它们神奇地"工作".以某种热插拔方式发生这种情况,意味着在应用程序运行时,这将是最佳的.
我目前正在尝试确定以下五个问题的答案(在您的帮助下).
Angular 2/4/5/6应用程序的插件框架是否实用？(到目前为止,我还没有找到任何实用的方法来创建一个真正的可插拔框架Angular2/4/5/6.)Angular 2/4/5/6应用程序实现插件框架时可能会遇到哪些挑战？Angular 2/4/5/6应用程序的插件框架？Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么？Angular 2/4/5/6,那么相对等效的技术(例如React)可能适用于现代高反应性Web应用程序？一般来说,使用Angular …
我们有几个Web应用程序,我们希望在一个单页面应用程序下呈现.我们正在寻找一个可以使用的微前端架构/框架.正如我们所看到的,这些是我们实施的选择:
当前状态是monolith FE应用程序,它将其他子应用程序作为内部第三方程序包使用.这种方法对我们来说是不可扩展的,因为托管应用程序正在一起构建所有产品,并没有真正分离.
我们的要求是微前端的通常要求:1.独立开发 - 每个团队都可以选择自己的框架并构建他们的产品,而不管其他产品.
独立部署 - 每个应用程序都可以在生产中升级,无需停机,也不会干扰其他应用程序.
共享组件 - 我们在我们的应用程序中使用Angular4,并且我们已经编写了一个专有的第三方库(共享组件和逻辑),应该在所有产品之间共享,以获得相似的外观.
我们希望能够升级每个应用程序的框架(Angular,RXjs,Typescript等以及我们的专有组件库),而无需关心其他应用程序.
我们尝试使用单一spa框架,但我们遇到了一些问题,如果这对我们来说是正确的方法,或者我们应该尝试不同的方法,我们现在可以自己思考.
我们使用单一水疗中心的问题是:1.资产加载是有问题的.(我们必须将资产文件放在托管应用程序的根文件夹中,并且切换到另一个应用程序时会遇到资产冲突).2.我们仍然不知道如何处理所有应用程序的全局样式(我们使用sass进行样式化,并且必须与每个应用程序的本地样式一起使用)3.升级角度框架(或所有其他框架)是不可能的对于一个应用程序,它是全部或全部(因为我们有一个角度的实例).4.我们必须在托管应用程序(shell)的另一侧实现不同的捆绑开发.
当我们考虑Iframe(使用友好的Iframe)解决方案时,我们可视化所有子应用程序之间的完全分离,并倾向于认为这对我们来说是更合适的方法.
使用Iframe有任何陷阱吗？
谢谢,丹尼尔
我们的团队正在开发一个大型项目,我们希望构建一个包含多种表单和仪表板和功能的大型应用程序.一个整体SPA会变得复杂.所以我们讨论"微前端架构师"的方法.目标是生成包含多个子SPA的父SPA.所有SPA应该具有相同的框架(vueJS).
这种方法背后的想法(https://micro-frontends.org/)
我们已经找到了这种方法的一些实现
1)https://micro-frontends.org/
2)CanopyTax with single-spa - > https://github.com/CanopyTax/single-spa
我们想要在我们的前端使用什么:
VUE
VUE路由器
VUE资源
VUE装载机
的WebPack
我们的问题:
1)是否可以使用标准vue工具基于vue创建复合UI(微前端)？
- we are not sure how doable is it with VueJS
- there may already be example projects?
2)我们有多个页面,因此我们需要一个从一侧导航到另一侧的解决方案.我们如何实现页面转换？
3)是否可以在VueJS组件之间建立事件总线？
4)我们如何实现组件之间的双向通信？
- Parent-Child Communication
- Child-Parent Communication
我一方面有一个现有网站，另一方面有一个 Angular 7 应用程序组件。
我想编辑现有的someusecase.html并重用我的 Angular 7 应用程序，例如
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
我需要在 html 中包含什么才能使其工作？我正在寻找相当于以下内容的东西：
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
换句话说，是否可以在<div>现有网页的范围内重用和激活 Angular 7 应用程序？
angular ×3
frontend ×2
javascript ×2
angular-cli ×1
angular7 ×1
html ×1
iframe ×1
plugins ×1
vue.js ×1
web ×1