在Angular 2、4、5、6中实现插件架构/插件系统/可插入框架 [英] Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6

问题描述

更新5/24/2018::根据我的原始帖子，我们现在是Angular的+3版本，仍然没有最终可行的解决方案. Lars Meijdam(@LarsMeijdam)提出了一种有趣的方法，当然值得一看. (由于专有问题，他不得不暂时删除他最初发布其示例的GitHub存储库.但是，如果您想要复制它，则可以直接向他发送消息.有关更多信息，请参见下面的评论.)

Update 5/24/2018: We are now +3 versions of Angular from my original post and still don't have a final workable solution. Lars Meijdam (@LarsMeijdam) has come up with an interesting approach which is certainly worth a look-see. (Due to proprietary issues, he had to temporarily remove the GitHub repository where he had originally posted his sample. However, you may message him directly if you would like a copy. Please see the comments below for more info.)

Angular 6中最近的架构更改确实使我们更接近解决方案.此外，Angular Elements( https://angular.io/guide/elements )提供了一些组件功能-虽然不完全是我最初在这篇文章中描述的.

Recent architectural changes in Angular 6 do bring us closer to a solution. Additionally, Angular Elements (https://angular.io/guide/elements) provides some component functionality--though not quite what I originally described in this post.

如果来自惊人的Angular团队的任何人碰巧遇到此问题，请注意，似乎还有很多其他人对此功能也非常感兴趣.积压的订单可能值得考虑.

If anyone from the amazing Angular team happens to come across this, please note that there seem to be many other people who are also very interested in this functionality. It might well be worth considering for the backlog.

我想在Angular 2，Angular 4，Angular 5或Angular 6应用程序中实现可插拔(插件)框架.

I would like to implement a pluggable (plug-in) framework in an Angular 2, Angular 4, Angular 5, or Angular 6 application.

(我开发此可插入框架的特定用例是，我需要开发一个小型内容管理系统.由于此处未详细说明的许多原因，Angular 2/4/5/6几乎可以满足大多数需求系统.)

(My specific use case for developing this pluggable framework is that I need to develop a miniature content management system. For a number of reasons not necessarily elaborated here, Angular 2/4/5/6 is a near perfect fit for most of the needs of that system.)

通过可插拔框架(或插件体系结构)，我专门指的是一种系统，该系统允许第三方开发人员通过使用可插拔组件来创建或扩展主应用程序的功能，而无需直接访问或了解主应用程序的源代码或内部工作方式.

By pluggable framework (or plug-in architecture), I specifically mean a system which allows third party developers to create or extend the functionality of a primary application through the use of pluggable components without having direct access to or knowledge of the primary application's source code or inner workings.

(关于"无需直接访问或不知道应用程序的源代码或内部工作原理的措辞"是我们的核心目标.)

(That phrasing about "without having direct access to or knowledge of the application's source code or inner workings" is a core objective.)

可插入框架的示例包括常见的内容管理系统，例如WordPress或Drupal.

Examples of pluggable frameworks include common content management systems like WordPress or Drupal.

理想的情况(与Drupal一样)将是简单地将这些可插入组件(或插件)放置在文件夹中，让应用程序自动检测或发现它们，并使它们神奇地工作. "以某种可热插拔的方式发生这种情况，这意味着在应用程序运行时将是最佳选择.

The ideal situation (as with Drupal) would be to simple be able to place these pluggable components (or plug-ins) into a folder, have the application auto-detect or discover them, and have them just magically "work." Having this occur in some sort of hot-pluggable manner, meaning while the app was running, would be optimum.

我目前正在尝试确定以下五个问题的答案(在您的帮助下).

I am currently trying to determine answers (with your help) to the following five questions.

1. 实用性:用于Angular 2/4/5/6应用程序的插件框架甚至可行吗? (到目前为止，我还没有找到使用Angular2/4/5/6创建真正可插拔框架的任何实用方法.)
2. 预期的挑战:在为Angular 2/4/5/6应用程序实现插件框架时可能遇到哪些挑战?
3. 实施策略:可以为实施Angular 2/4/5/6应用程序的插件框架采用哪些特定的技术或策略?
4. 最佳实践:为Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么?
5. 替代技术: 如果插件框架在Angular 2/4/5/6应用程序中不不实际，那么相对等价技术(例如React)可能适用于现代高反应性Web应用程序?

1. Practicality: Is a plugin framework for an Angular 2/4/5/6 application even practical? (Until now, I have not found any practical way to create a truly pluggable framework with Angular2/4/5/6.)
2. Expected Challenges: What challenges might one encounter in implementing a plugin framework for an Angular 2/4/5/6 application?
3. Implementation Strategies: What specific techniques or strategies could be employed for implementing a plugin framework for an Angular 2/4/5/6 application?
4. Best Practices: What are the best practices for implementing a plugin system for an Angular 2/4/5/6 application?
5. Alternative Technologies: If a plugin framework is not practical in an Angular 2/4/5/6 application, what relatively equivalent technologies (e.g. React) might be suitable for a modern highly reactive Web application?

通常，最好使用Angular 2/4/5/6，因为:

In general, use of Angular 2/4/5/6 is very desirable because:

• 它自然地非常快-如此之快.
• 它消耗的带宽很小(在初始加载后)
• 它的足迹相对较小(在AOT和tree shaking之后)，并且足迹不断缩小
• 功能强大，Angular团队和社区正在持续快速发展其生态系统
• 它与许多最佳和最新的Web技术(例如TypeScript和Observables
)配合得很好
• Angular 5现在支持服务工作者(

• it is naturally extremely fast--blazingly so.
• it consumes very little bandwidth (after the initial load)
• it has a relatively small footprint (after AOT and tree shaking)--and that footprint continues to shrink
• it is highly functional, and the Angular team and community are continuing rapid growth of its ecosystem
• it plays well with many of the best and latest Web technologies such as TypeScript and Observables
• Angular 5 now supports service workers (https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7)
• being backed by Google, it is likely to be supported and enhanced well into the future

我非常想在当前项目中使用Angular 2/4/5/6.如果我能够使用Angular 2/4/5/6，那么我还将使用Angular-CLI，可能还会使用Angular Universal(用于服务器端渲染.)

I would very much like to use Angular 2/4/5/6 for my current project. If I am able to use Angular 2/4/5/6, I will also be using Angular-CLI and probably Angular Universal (for server-side rendering.)

到目前为止，关于上述问题，这是我的想法. 请查看并提供您的反馈和启示.

Here are my thoughts, so far, regarding the questions above. Please review and provide your feedback and enlightenment.

• Angular 2/4/5/6应用程序使用程序包-但这不一定与允许应用程序中的插件相同.通过将plugin文件夹放到公共模块目录中，可以从本质上添加其他系统中的插件(例如Drupal)，在该目录中系统会自动将其拾取".在Angular 2/4/5/6中，通常通过npm安装软件包(可能是插件)，然后将其添加到package.json中，然后像app.module一样手动导入到应用程序中.这比Drupal删除文件夹并让系统自动检测软件包的方法要复杂得多. 安装插件越复杂，人们使用它们的可能性就越小.如果Angular 2/4/5/6有一种自动检测和安装插件的方法，那就更好了.我非常想找到一种方法，该方法允许非开发人员安装Angular 2/4/5/6应用程序并安装任何选择的插件，而无需了解应用程序的所有体系结构.

• Angular 2/4/5/6 apps consume packages--but this is not necessarily the same as allowing plugins within an application. A plugin in other systems (e.g. Drupal) can be essentially added by dropping the plugin folder into a common modules directory where it is automatically "picked up" by the system. In Angular 2/4/5/6, a package (as a plugin might be) is usually installed via npm, added to the package.json, and then manually imported into the app--as in app.module. This is much more complicated than the Drupal method of dropping a folder and having the system automatically detect the package. The more complicated it is to install a plugin, the less likely people will be to use them. It would be much better if there was a way for Angular 2/4/5/6 to automatically detect and install plugins. I am very interested to find a method which allows non-developers to install the Angular 2/4/5/6 application and install any chosen plugins without having to understand all of the application's architecture.

通常，提供可插拔体系结构的好处之一是，第三方开发人员很容易扩展系统功能.显然，这些开发人员不会熟悉他们所插入的应用程序的所有代码复杂性.开发插件后，其他技术程度较低的用户都可以简单地安装应用程序和任何选定的插件.但是，Angular 2/4/5/6相对复杂，并且学习曲线很长.更复杂的是，大多数生产Angular 2/4/5/6应用程序还利用Angular-CLI，Angular Universal和WebPack.实施插件的人可能至少需要具备所有这些知识如何配合的基本知识，以及对TypeScript的深入了解和对NodeJS的合理了解.知识要求是否如此之高，以至于没有第三方愿意开发插件?

Generally, one of the benefits of providing a pluggable architecture, is that it is very easy for 3rd party developers to extend the functionality of the system. Obviously, these developers will not be familiar with all of the intricacies of the code for the application they are plugging into. Once the plugins are developed, other even less technical users may simply install the application and any selected plugins. However, Angular 2/4/5/6 is relatively complicated and has a very lengthy learning curve. To further complicate things, most production Angular 2/4/5/6 applications also utilize Angular-CLI, Angular Universal, and WebPack. Someone who is implementing a plugin would probably have to have at least some basic knowledge of how all of these fit together--along with a strong working knowledge of TypeScript and a reasonable familiarity with NodeJS. Are the knowledge requirements so extreme that no third party would ever want to develop a plugin?

大多数插件可能会具有一些服务器端组件(例如，用于存储/检索与插件相关的数据)以及一些客户端输出. Angular 2/4/5特别(强烈)不鼓励开发人员在运行时注入自己的模板，因为这会带来严重的安全风险.为了处理插件可以容纳的许多类型的输出(例如，图形显示)，似乎可能需要允许用户创建以另一种形式注入到响应流中的内容.我不知道在不象征性地粉碎Angular 2/4/5/6的安全机制的情况下，如何可能满足这种需求.

Most plugins will likely have some server side component (e.g. for storing/retrieving plugin related data) as well as some client-side output. Angular 2/4/5 specifically (and strongly) discourages developers from injecting their own templates at runtime--as this poses a serious security risk. In order to handle many types of output that a plugin may accommodate (e.g. display of a graph), it appears that allowing users to create content which is injected into the response stream, in one form another, is probably necessary. I wonder how it might be possible to accommodate this need without figuratively shredding Angular 2/4/5/6's security mechanisms.

大多数生产版本的Angular 2/4/5/6应用程序都是使用Ahead of Time(AOT)编译进行预编译的. (可能应该都是.)我不确定如何将插件添加到预编译的应用程序(或与之集成).最好的方案是与主应用程序分开编译插件.但是，我不确定如何使这项工作.一个后备方法可能是使用任何包含的插件重新编译整个应用程序，但这对于只想将应用程序(在其自己的服务器上)以及任何选定的插件一起安装的管理用户来说，会使事情变得有些复杂.

Most production Angular 2/4/5/6 applications are pre-compiled using Ahead of Time (AOT) compilation. (Probably all should be.) I am uncertain how plugins might be added to (or integrated with) pre-compiled applications. The best scenario would involve compiling the plugins separately from the main application. However, I am uncertain how to make this work. A fallback might be to re-compile the entire application with any included plugins but that complicates things a bit for an administrative user who simply wants to install the application (on his own server) along with any selected plugins.

在Angular 2/4/5/6应用程序中，尤其是预编译的应用程序中，一条错误或冲突的代码可能会破坏整个应用程序. Angular 2/4/5/6应用程序并非总是最容易调试的.行为不当的插件的应用可能会导致非常不愉快的体验.我目前不了解可以正常处理行为异常的插件的机制.

In an Angular 2/4/5/6 application, especially a pre-compiled one, a single piece of errant or conflicting code can break the entire application. Angular 2/4/5/6 applications are not always the easiest to debug. Application of ill-behaved plugins could result in very unpleasant experiences. I am currently unaware of a mechanism to gracefully handle ill-behaved plugins.

推荐答案

我在github上创建了一个存储库，并提供了可能有用的解决方案.它使用Angular 6库和1个基本应用程序，它们会延迟加载UMD捆绑的库. https://github.com/lmeijdam/angular-umd-dynamic-example

I created a repository on github with a solution which might help. It uses Angular 6 libraries and 1 base applications which load up the UMD bundled libraries lazily; https://github.com/lmeijdam/angular-umd-dynamic-example

如果您有任何建议，请随时添加！

If you have any suggestions, please feel free to add!

这篇关于在Angular 2、4、5、6中实现插件架构/插件系统/可插入框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！