Angular 9-动态延迟加载模块-依赖项的请求是一个表达式

Question

我将利用Angular Lazy-loading feature modules来实现可插入的前端。因此，概念是在我的应用程序中创建扩展点，在这里我可以执行以下操作：

import('./customers/customers.component').then(lazyMod => {
   here use lazyMod.CustomersComponent to plug other component's template
})

我已经在stackblitz的简单PoC中提出了这个想法：https://angular-9-dynamic-lazy-test.stackblitz.io

案例1-确定-按下PoC的button1，它将运行以下代码，并且可以：]

const { HelloComponent } = await import('./hello.component')
案例2

-确定-按下PoC的button2，它将运行以下代码，没关系：

const helloLazyModulePath = './hello.component';
const { HelloComponent } = await import(helloLazyModulePath );
案例3

-KO-按下PoC的button3，它将运行以下代码，但我收到错误消息：

const goodbyeLazyModulePath = './goodbye.component';
const { HelloComponent } = await import(goodbyeLazyModulePath);  
错误

为：Uncaught (in promise): Error: Cannot find module。构建warning说：Critical dependency: the request of a dependency is an expression

原因应为：根据https://angular.io/guide/deployment#lazy-loading

The CLI runs the Angular Ahead-of-Time Webpack Plugin which automatically recognizes
lazy-loaded NgModules and creates separate bundles for them
这意味着webpack角度工具

，在构建阶段，扫描源代码以找出@import('path')，并为延迟模块创建一个单独的包。因此，如果将@import专门用于@import(variable)，则webpack无法确定必须在单独的捆绑包中构建哪个功能模块。

我需要使用@import(variable)，因为根据许多因素，我知道仅在构建阶段才导入哪个插件模块，例如，要部署的环境。

是否有一种方法（解决方法或编译设置）使用@import(variable)而不会由于缺少单独的软件包而在运行时出现错误？

我将利用Angular Lazy-loading功能模块来实现可插入的前端。因此，概念是在我的应用程序中创建扩展点，我可以在其中执行以下操作：import（'./ customers / ...

Answer 1

路径有多动态？我的意思是您应该能够知道所有可能的路径。因此，您可以执行以下操作：