带有异步导入模块的延迟NgModule声明

Question

我想动态导入第三方模块并检查它。那么NgModule中的声明取决于它是否存在(真/假)。就像我下面的代码。问题是:动态导入是一个承诺。我需要导入承诺加载后的NgModule声明。我怎么能解决呢？

let loaded = false;

import('ngx-color-picker').then((module) => {
    console.log(module);
    loaded = true;
}); // => it takes time

// the Module suddenly declaration => i need to delay it somehow and
// runs AFTER the above import Promise has loaded
@NgModule({
    declarations: [
        loaded ? SmNgxColorPickerComponent : [],
    ],
    imports: [
        // --- Angular Base imports ---
        CommonModule,
        ReactiveFormsModule,

        // --- Angular Material imports ---
        MatInputModule,

        // --- Vendor imports ---
        loaded ? ColorPickerModule : [],
    ],
    exports: [
        loaded ? SmNgxColorPickerComponent : [],
    ],
    providers: []
})
export class SmNgxColorPickerModule {

}

Answer 1

在最新的下一个版本中，现在可以使用顶级等待来完成它了。(https://github.com/tc39/proposal-top-level-await)

若要启用顶层，请等待角度：

1. 在模块中使用esnext (es2022)，在目标中使用es2017或更高的(tsconfig.json)

"target": "es2017", // or higher
"module": "esnext",

1. 为webpack启用experiments.topLevelAwait (webpack.config.js)

module.exports = {
    experiments: { topLevelAwait: true }
};

1. 现在可以使用等待外部异步函数。

const fix = await import('library').then(
  _ => loaded = true
)