Angular 5 - 在运行时动态加载模块(在编译时未知)

时间:2018-02-02 20:30:59

标签: angular webpack angular-routing systemjs angular5

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

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

编辑:

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

2 个答案:

答案 0 :(得分:2)

您可以查看动态组件加载:https://angular.io/guide/dynamic-component-loader

它允许您在运行时动态添加组件。

答案 1 :(得分:2)

嗯,虽然涉及复杂性,但可以尝试一下。取决于你的代码库我猜。路由器公开GHI属性,保存它的当前配置,以及config方法重置配置。你可以从那里开始,然后即时添加组件。

但是,组件必须是可访问的。也许是动态创建的,如另一个答案所述。或者,您的配置可能包含以下内容:

resetConfig(routes: Routes)

你必须以某种方式得到pluginPath和pluginName - 也许按惯例计算它,也许是一个小的'得到这个的后端帮助程序,可能有预先配置并已加载或类似的数组。我还假设你有一个非常好的测试系统,以确保你的插件兼容"。最后,教webpack / systemjs如何准备好模块。总而言之,这并非不可能,但它涉及一些基础工作。

那就是说,Angular 6就在角落里,并且随之而来的是Angular Elements。元素将提供一种方法来将您的模块编译为Web组件和" export"它们,以便它们可以在任何地方使用(不一定在Angular应用程序中)。想想jQuery插件 - 你需要加载一个基础constructor(private router: Router) {} private addPlugin(routePath, pluginName, pluginPath) { const currentConfig = this.router.config; currentConfig.push({ path: routePath, loadChildren: `precompiled-modules/${pluginPath}#${pluginName}`, }); this.router.resetConfig(currentConfig); } ,但除此之外你不再考虑它,你只需要使用你的新元素。它与Angular Elements类似 - 您导出基本上是Web组件的东西。有一个"装载机" part(jquery.min.js等价物)和你的Element包。但是,您的组件只是另一个HTML节点,具有属性,属性,绑定,事件,您不再关心,就像您不关心输入一样。

值得等待,看看并自己决定。