在Angular中动态加载模块或组件

如何解决在Angular中动态加载模块或组件

所以我要完成的工作是加载编译时未知的模块或组件。

我们（和我的团队）已经构建了一个应用程序，现在我们希望使该应用程序可扩展到其他团队。我们希望使团队能够构建自己的组件并在运行时加载它们。

所以我想到的是，一个团队只需将一个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。此函数执行以下操作：

1. 它定义了一个Angular模块，并导入了我们上面定义的模块，该模块声明了我们的组件。
2. 它使用platformBrowserDynamic().bootstrapModule(ExtensionModule)引导该模块
3. 它为我们注册的组件解析了组件工厂
4. 它将组件注册为Angular元素

现在，当我使用此Angular Element时，组件可以工作，但仍然存在一些问题。我希望能够通过主应用程序的现有注入器，以便可以使用在那里定义的每个提供程序。现在您可以看到我已经做了一些事情，因此可以将 DataService 注入到外部组件中。这可以工作，但是模板无法正确更新。我认为这是因为我正在使用platformBrowserDynamic().bootstrapModule(...)创建一个新的Angular上下文。

我尝试使用现有Angular上下文的编译器，如下所示：

compiler.compileModuleAndAllComponentsAsync(ExtensionModule);

但是，这始终在ExtensionModule上显示为“无法读取null的属性'declarations'。”

我已经尝试了SystemJsNgModuleLoader，但是这似乎已被弃用，因为编译器说使用import语句而不是加载程序，但是使用import语句将使用webpack，并且它将需要在编译时为AFAIK提供的代码

有人对此有任何经验或知识，如何正确地做到这一点吗？