在 Angular 中导入模块列表？

Question

我的愿景是：

const usedModules = [MatIconModule, MatInputModule, ...];

for(let i=0; i<usedModules.length; i++) {
    import { usedModules[i] } from '@angular/material';
}
@NgModule({
    imports: usedModules,
    exports: usedModules,
})
export class AppMaterilaModule {}

显然这是行不通的。 有没有人知道如何创建动态导入语句，即只列出 usedModules 一次？

Answer 1

您可以使用SystemJS动态加载模块。 它看起来像：

const plugins = [
  './plugin1.js',
  './plugin2.js'
];

const loadPlugins = (plugins) => {
  return plugins.map( (path) => window.SystemJS.import(path) );
};

Promise.all(loadPlugins(plugins)).then(() => {
    // Everything is ready now
});

我希望我能正确理解这个问题。

Answer 2

模块用于引导应用程序，因此此时无法决定使用什么。 您拥有的唯一可能性（朝这个方向发展）是制作仅具有必要依赖项的小模块，然后使用延迟加载，因此仅在调用某个路由时才加载依赖项。 但这将导致更多的时间花在页面加载而不是应用程序加载上。 它不适用于 AOT 编译。