相关疑难解决方法(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 …

目前我正在开发一个托管在客户端服务器上的项目.对于新的"模块",无意重新编译整个应用程序.也就是说,客户端希望在运行时更新路由器/延​​迟加载的模块.我已经尝试了几件事,但我无法让它发挥作用.我想知道你们中是否有人知道我还能尝试什么或者我错过了什么.

有一点我注意到,在构建应用程序时,我尝试使用angular cli的大部分资源都被webpack捆绑成单独的块.这似乎是合乎逻辑的,因为它使用了webpack代码拆分.但是如果在编译时模块还不知道怎么办(但是编译后的模块存储在服务器的某个地方)？捆绑不起作用,因为它找不到要导入的模块.并且使用SystemJS将在系统上找到时加载UMD模块,但也通过webpack捆绑在一个单独的块中.

我已经尝试过的一些资源;

• 动态远程组分装载机
• 模块加载
• 在运行时从不同服务器加载模块
• 如何将动态外部组件加载到Angular应用程序中
• 在Angular 2,4,5,6中实现插件架构/插件系统/可插拔框架
• Angular 5 - 在运行时动态加载模块(在编译时未知)
• https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
• 其他几个与此主题有关.

我已经尝试并实现了一些代码,但目前还没有工作;

使用普通的module.ts文件扩展路由器

     this.router.config.push({
    path: "external",
    loadChildren: () =>
      System.import("./module/external.module").then(
        module => module["ExternalModule"],
        () => {
          throw { loadChunkError: true };
        }
      )
  });

正常SystemJS导入UMD捆绑包

System.import("./external/bundles/external.umd.js").then(modules => {
  console.log(modules);
  this.compiler.compileModuleAndAllComponentsAsync(modules['External']).then(compiled => {
    const m = compiled.ngModuleFactory.create(this.injector);
    const factory = compiled.componentFactories[0];
    const cmp = factory.create(this.injector, [], null, m);

    });
});

导入外部模块,不使用webpack(afaik)

const url = 'https://gist.githubusercontent.com/dianadujing/a7bbbf191349182e1d459286dba0282f/raw/c23281f8c5fabb10ab9d144489316919e4233d11/app.module.ts';
const importer = (url:any) => Observable.fromPromise(System.import(url));
console.log('importer:', …

我遇到了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应用程序的"插件系统".