Angular 5 - 在 运行 时动态加载模块（编译时未知）
Angular 5 - load modules (that are not known at compile time) dynamically at run-time
Angular 5 是否可以加载编译时未知但在运行时动态加载的 modules/components？
我想这在使用 webpack 时行不通，但也许使用 system.js?
编辑：
整个想法是构建一个基于插件的应用程序，其中将单个插件放入插件文件夹中，angular 将自动选择它，而无需重新编译和部署整个 angular 应用程序。插件是独立的功能部分。当然还有路线导航等。意味着一旦 angular 了解有一个新插件，它应该添加一些动态导航，以便用户能够导航到插件等。
您可以查看动态组件加载：https://angular.io/guide/dynamic-component-loader
它允许您在运行时动态添加组件。
好吧，虽然其中涉及复杂性，但您可以尝试一下。我猜取决于你的代码库。路由器公开 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 - 也许按照惯例计算它，也许是一个获取它的小后端助手，也许它的数组已预先配置并已加载或类似。我还假设您会有一个非常好的测试系统，以确保您的插件是 "compatible"。最后，教 webpack/systemjs 如何准备好模块。总而言之，这并非不可能，但它涉及一些基础工作。
也就是说，Angular 6 即将到来，随之而来的是 Angular 个元素。 Elements 将提供一种方法将您的模块编译为 Web 组件并 "export" 它们，以便它们可以在任何地方使用（不一定在 Angular 应用程序中）。想想 jQuery 插件 - 有一个基础 jQuery.min.js 你需要加载，但除此之外你不再考虑它，你只需使用你的新元素。它与 Angular Elements 类似 - 您导出基本上是 Web 组件的内容。有一个 "loader" 部分（jquery.min.js 等价物）和您的元素包。但是你的组件只是另一个 HTML 节点，具有属性、特性、绑定、事件，你不再关心，就像你不关心输入一样。
也许值得等待，看一看再决定。
Angular 5 是否可以加载编译时未知但在运行时动态加载的 modules/components？
我想这在使用 webpack 时行不通，但也许使用 system.js?
编辑：
整个想法是构建一个基于插件的应用程序，其中将单个插件放入插件文件夹中，angular 将自动选择它，而无需重新编译和部署整个 angular 应用程序。插件是独立的功能部分。当然还有路线导航等。意味着一旦 angular 了解有一个新插件，它应该添加一些动态导航，以便用户能够导航到插件等。
您可以查看动态组件加载：https://angular.io/guide/dynamic-component-loader
它允许您在运行时动态添加组件。
好吧，虽然其中涉及复杂性，但您可以尝试一下。我猜取决于你的代码库。路由器公开 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 - 也许按照惯例计算它，也许是一个获取它的小后端助手，也许它的数组已预先配置并已加载或类似。我还假设您会有一个非常好的测试系统，以确保您的插件是 "compatible"。最后，教 webpack/systemjs 如何准备好模块。总而言之，这并非不可能，但它涉及一些基础工作。
也就是说，Angular 6 即将到来，随之而来的是 Angular 个元素。 Elements 将提供一种方法将您的模块编译为 Web 组件并 "export" 它们，以便它们可以在任何地方使用（不一定在 Angular 应用程序中）。想想 jQuery 插件 - 有一个基础 jQuery.min.js 你需要加载，但除此之外你不再考虑它，你只需使用你的新元素。它与 Angular Elements 类似 - 您导出基本上是 Web 组件的内容。有一个 "loader" 部分（jquery.min.js 等价物）和您的元素包。但是你的组件只是另一个 HTML 节点，具有属性、特性、绑定、事件，你不再关心，就像你不关心输入一样。
也许值得等待，看一看再决定。