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

Question

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

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

编辑:

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

Answer 1

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

不过，这些组件必须是可访问的。也许是动态创建的，正如另一个答案中提到的。或者，您的配置可以包含如下内容：

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 - 也许按惯例计算它，也许一个小的后端助手得到这个，也许有它的数组预先配置并已经加载或类似。我还假设您将拥有一个非常好的测试系统，以确保您的插件“兼容”。最后，教 webpack/systemjs 如何准备好模块。总而言之，这并非不可能，但需要一些基础工作。

也就是说，Angular 6 和 Angular Elements 即将到来。Elements 将提供一种将模块编译为 Web 组件并“导出”它们的方法，以便它们可以在任何地方使用（不一定在 Angular 应用程序中）。想想 jQuery 插件 - 您需要加载一个基础jQuery.min.js，但除此之外您不再考虑它，您只需使用新元素即可。它与 Angular Elements 类似 - 您导出基本上是一个 Web 组件。有一个“加载器”部分（jquery.min.js 等效项）和您的 Element 包。但是你的组件只是另一个 HTML 节点，具有属性、特性、绑定、事件，你不再关心，就像你不再关心输入一样。

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