Typescript动态模块导入引发错误

Question

我想动态导入模块。

consumers.ts

if (condition) {
    import("src/app/apis/mocks/consumer-list.dev");
}

但是上面的代码抛出以下错误：

Cannot find module 'src/app/apis/mocks/consumer-list.dev'

同时在同一路径上使用非动态导入时，一切正常

import { consumers } from "src/app/apis/mocks/consumer-list.dev";

1. 为什么动态导入失败？
2. 要使其正常工作我需要做什么？

打字稿版本：2.9.2

模块的结构：

------src
--------app
----------apis
-------------mocks
-----------------consumer-list.dev.ts
-------------consumers.ts

Answer 1

您拥有哪个版本的打字稿？ （自TypeScript 2.4开始支持导入。） 尝试使用相对的./路径的开始。

const module = './src/app/apis/mocks/consumer-list.dev';

导入功能已同步并返回Promise。

 import('module').then(e => {
        consol.log(e);
    });

Answer 2

我看到您的consumers.ts是从哪里触发调用的，它位于包含模块的模块中。

所以尝试./mocks/consumer-list.dev

Answer 3

最终找到了导致问题的原因：

我使用了变量作为模块名称：

mul

同时将运行以下代码：

const mock = "src/app/apis/mocks/consumer-list.dev"
import(mock)

这是webpack处理动态导入的方式。这是解决方法的github问题： https://github.com/webpack/webpack/issues/6680