问题描述
所以我要完成的工作是加载编译时未知的模块或组件。
我们(和我的团队)已经构建了一个应用程序,现在我们希望使该应用程序可扩展到其他团队。我们希望使团队能够构建自己的组件并在运行时加载它们。
所以我想到的是,一个团队只需将一个URL注册到一个JavaScript文件中,并且我们的应用程序会动态导入该JavaScript文件。顺便说一句,我仍然处于PoC困境中,我无法向您展示如何在实际应用程序中解决此问题,因此我构建了一个基本相同的最小应用程序。
yentheo/angular-dynamic-imports
所以我有一个主应用程序,它是一个普通的Angular 10应用程序。在此应用程序中,我有一个 normalComponent 和一个 InternalAngularElementsComponent 。 normalComponent 用于app.component.ts中。 InternalAngularElementsComponent 被注册为自定义元素,并添加到 AppComponent 的html中。
现在所有这些都可以正常工作。如果仅在主应用程序文件夹中执行npm start
,则Angular应用程序将从http:// localhost:4200启动,您可以单击组件的按钮,然后您会看到按钮中的值增加了每次点击1次。
还有第二个应用程序,称为外部应用程序。这是Rollup.js的简单TypeScript“项目”。我定义了与其他2类似的组件并将其注册到模块。我使用Rollup.js,所以我得到一个Commonjs模块,可以在我的主应用程序(在app.component内部)中动态导入该模块。
在外部应用程序中运行npm build
时,它将src / index.ts中的所有内容编译为dist / index.js并将该文件复制到主应用程序中的资产/external/index.js中。
在AfterViewInit的app.component.ts中,我们对该文件进行动态导入,并调用导入模块的导出函数activate
。此函数执行以下操作:
- 它定义了一个Angular模块,并导入了我们上面定义的模块,该模块声明了我们的组件。
- 它使用
platformbrowserDynamic().bootstrapModule(ExtensionModule)
引导该模块 - 它为我们注册的组件解析了组件工厂
- 它将组件注册为Angular元素
现在,当我使用此Angular Element时,组件可以工作,但仍然存在一些问题。我希望能够通过主应用程序的现有注入器,以便可以使用在那里定义的每个提供程序。现在您可以看到我已经做了一些事情,因此可以将 DataService 注入到外部组件中。这可以工作,但是模板无法正确更新。我认为这是因为我正在使用platformbrowserDynamic().bootstrapModule(...)
创建一个新的Angular上下文。
我尝试使用现有Angular上下文的编译器,如下所示:
compiler.compileModuleAndAllComponentsAsync(ExtensionModule);
但是,这始终在ExtensionModule上显示为“无法读取null的属性'declarations'。”
我已经尝试了SystemJsNgModuleLoader,但是这似乎已被弃用,因为编译器说使用import
语句而不是加载程序,但是使用import语句将使用webpack,并且它将需要在编译时为AFAIK提供的代码
有人对此有任何经验或知识,如何正确地做到这一点吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)