相关疑难解决方法(0)

更新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一样)是简单地将这些可插入组件(或插件)放入文件夹,让应用程序自动检测或发现它们,让它们神奇地"工作".以某种热插拔方式发生这种情况,意味着在应用程序运行时,这将是最佳的.

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

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应用程序？

一般来说,使用Angular …

我已经尝试加载没有使用路由器的模块SystemJsNgModuleLoader,但无法使其工作:

this.loader.load(url).then(console.info);

我正在Cannot find module xxx使用我用于URL的任何字符串(aboslute/relative urls/paths ...尝试了很多选项).我浏览了一下路由器源代码,然后找不到其他任何东西SystemJsNgModuleLoader.我甚至不确定我应该使用这个......

昨天在ng-europe 2016会议上就提出了这个问题--Miško和Matias回答说:

MiškoHevery: 只需要掌握模块,就可以从那里获得组件工厂,您可以在应用程序中的任何位置动态加载组件工厂.这正是路由器内部所做的事情.因此,你也可以做到这一点.

MatiasNiemelä 唯一值得注意的是,在[Ng]模块上有一些被调用的东西entryComponents,它可以识别可以延迟加载的组件 - 这是该组件集的入口.所以当你有懒惰加载的模块时,请把东西放进去entryComponents.

......但是,如果没有关于这个问题的例子和糟糕的文档,那就不是那么紧张的前进了;

任何人都知道如何手动加载模块,而不使用Route.loadChildren？如何掌握模块以及应该进入的内容究竟是什么entryComponents(我阅读常见问题解答,但不能在没有实际加载模块的情况下尝试)？

我遇到了Angular应用程序的问题.

我想用(aot)的Typscript构建一个角度应用程序.

目的是显示带有一些小部件的用户仪表板.小部件是角度组件.

我的应用程序附带了一些嵌入式小部件.但小部件应该通过像市场这样的东西来扩展; 或手动创建.

市场应该将文件(js/ts/bunlde .. ??)下载到特定的文件夹中.

然后我的应用程序应该能够加载新的小部件(= ng组件)并实例化它们.

我的文件夹结构(制作)

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

然后在加载用户页面时,数据库说有一个widgetA.因此,目标是动态加载文件和instanciate包含的组件.

我尝试过很多解决方案,使用"require"和"System.import",但是当动态生成加载路径时,两者都失败了.

这应该是可能的吗？我可以改变我的代码结构; 更改外部小部件..(例如,widgetB尚未转换,...​​)

事实上,我正在寻找一个带有Angular4/webpack应用程序的"插件系统".

是否有可能在我的角度2应用程序运行时从不同的服务器加载不同的模块,如果是这样,我怎么能实现这一点？

我希望我的应用程序从隔离的服务器(A,B,C)加载整个应用程序中的不同组件,因此可以从主应用程序和A,B或C中包含的任何组件中独立地删除和更新它们.将不会被加载.底部显示的3个模块将具有组件,但主应用程序将在其中声明应加载组件的HTML.

UPDATE

通过路由延迟加载不是我想要的,3个模块应该是完全独立的模块,它们有自己的存储库,项目,托管,enz.

Angular 5是否可以加载在编译时未知但在运行时动态的模块/组件？

我想这可能无法使用webpack但可能使用system.js？

编辑:

整个想法是构建一个基于插件的应用程序,其中单个插件被放入插件文件夹中,angular将自动选择它,而无需重新编译和部署整个角度应用程序.插件是独立的功能.当然有路线导航等.意味着一旦角度理解有一个新的插件,它应该添加一些动态导航,以便用户将能够导航到插件等.

我正在尝试开发 Web Api (NET CORE) 可插件应用程序的前端。我想使用 Angular 9，但我不是 Angular 专家。

我的后端被设计为可扩展的，在启动时它会在指定的文件夹中监视，如果存在一个或多个包含扩展基本应用程序（如插件）逻辑的 dll 文件，它会加载它们。我想在前端使用类似的方法。我尝试了不同的解决方案并阅读了很多文章，但很难找到想要在编译时导入未知插件的人。

我尝试了懒惰的模块（从这个开始：https : //www.mokkapps.de/blog/manually-lazy-load-modules-and-components-in-angular/）这将是完美的，但使用这个我必须知道实现插件（模块）在编译我的 angular 应用程序之前，因为如果我想使用模块，我必须在我的主应用程序中使用导入功能。

因此，我进行了更多搜索，在使用 Angular CLI 和 Angular 5 在运行时动态加载新模块一文之后，我尝试了 System.Js 方法，但找不到适用于 angular 9 的解决方案。

我很确定我不是唯一一个会创建可插入的 Angular 应用程序的人，该应用程序无需重新编译主应用程序即可加载插件。

我需要一些关于正确方法的建议，或者一个使用插件架构的 angular 应用程序的工作示例。

这是我正在尝试实现的目标：我想使用“插件”创建一个应用程序，我所说的插件是：

另一个可以部署在远程主机上并显示在我的应用程序中的角度组件/模块。

看来我不能直接使用 webpack 做这样的事情，我应该使用 SystemJs 来动态加载模块。

欢迎使用 SystemJs 和 Webpack (ng cli) 提供任何建议，以及如何调用远程模块并加载它们的示例。