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编译。

在Angular中导入模块列表？

2 个答案: