Angular 5-在运行时动态加载模块(在编译时未知) [英] Angular 5 - load modules (that are not known at compile time) dynamically at run-time

问题描述

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

Is it possible for Angular 5 to load modules/components that are not known at compile time, but during runtime dynamically?

我猜想这在使用webpack时不起作用，但也许在使用system.js?

I guess this won't work using webpack but maybe using system.js?

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

The whole idea is to build a plugin based application where individual plugins are dropped inside a plugin folder, angular will pick it automatically, without having to recompile and deploy the whole angular app. Where plugins are separate pieces of functionalities. Of course there are routes navigation etc. Means that once angular understands there is a new plugin it should add some dynamic navigation so user will be able to navigate to the plugin, etc.

推荐答案

嗯，虽然涉及到复杂性，但是您可以可以尝试一下.我猜取决于您的代码库.路由器公开config属性，保留其当前配置，并提供resetConfig(routes: Routes)方法来重置配置.您可以从那里开始，然后动态添加组件.

Well, while there are complexities involved, you could try it. Depends on your code base I guess. The router exposes config property, holding its current config, and a resetConfig(routes: Routes) method for reseting configuration. You can start from there, and add, say, components on the fly.

尽管如此，组件确实必须是可访问的.可能是动态创建的，如其他答案中所述.另外，您的配置可以包含以下内容:

The components do have to be reachable, though. Perhaps dynamically created, as mentioned in the other answer. Alternatively, your config could include something like this:

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);
}

您将必须以某种方式获取pluginPath和pluginName-可能是按照约定进行计算的，可能是获得此功能的lil'后端助手，可能已经预先配置了它的数组并已经加载了类似的东西.我还假设您将拥有一个非常好的测试系统，以确保您的插件兼容".最后，教webpack/systemjs如何准备好模块.总而言之，这并非不可能，但这涉及一些基础.

You would have to get the pluginPath and pluginName somehow - maybe calculate it by convention, maybe a lil' backend helper that gets this, maybe have the array of it preconfigured and already loaded or similar. I also assume you would have a really good test system, to make sure your plugins are "compatible". And finally, teach webpack/systemjs how to have the modules ready. All in all, it is not impossible, but it involves some groundwork.

也就是说，Angular 6即将来临，Angular Elements也随之而来. Elements将提供一种将模块编译为Web组件并导出"它们的方式，以便它们可以在任何地方使用(不一定在Angular应用中使用).考虑一下jQuery插件-您需要加载一个基本的jQuery.min.js，但是除此之外，您不再需要考虑它，您只需使用新元素即可.它与Angular Elements相似-导出基本上是Web组件的东西.有一个加载程序"部分(相当于jquery.min.js)和您的Element捆绑包.但是，您的组件只是具有属性，属性，绑定，事件的另一个HTML节点，您不再在乎，就像您不在乎输入一样.

That said, Angular 6 is around the corner, and with it, Angular Elements. Elements will provide a way to compile your modules as web components and "export" them, so that they can get used anywhere (not necessarily in Angular apps). Think jQuery plugins - there is a base jQuery.min.js you need to have loaded, but apart from that you don't think about it any more, you just use your new elements. It's similar with Angular Elements - you export what is basically a Web component. There is a "loader" part (jquery.min.js equivalent), and your Element bundle. But then your component is just another HTML node, with properties, attributes, bindings, events, you don't care any more, just like you don't about inputs.

也许值得等待，看看并自己决定.

It might be worth the wait, take a look and decide for yourself.

这篇关于Angular 5-在运行时动态加载模块(在编译时未知)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！