Angular 5中tsconfig设module:esnext后动态模块导入失效

你遇到的这个问题挺典型的，明明已经把module设为esnext却还是报错，大概率是配置冲突或者Angular 5与对应TypeScript版本的兼容性限制导致的，下面给你几个排查和解决的方向：

1. 确认TypeScript版本兼容性 #

Angular 5对应的TypeScript版本范围是2.4.x到2.5.x，而动态导入（import()）在TypeScript 2.4中刚被引入，对esnext模块的支持还不够完善。你可以先检查当前项目的TypeScript版本：

npm ls typescript

如果版本低于2.4.2，建议升级到Angular 5支持的最高TypeScript版本（比如2.5.3），这可能会解决部分兼容性问题。

2. 检查是否有配置覆盖了tsconfig的module选项 #

Angular 5使用的angular-cli.json（后续版本改为angular.json）里的构建配置可能会覆盖tsconfig的设置。你可以打开这个文件，找到defaults -> build -> tsConfig字段，确认指向的是你修改的那个tsconfig文件，同时检查有没有额外的TypeScript编译参数被CLI注入。

另外，如果你有多个tsconfig文件（比如tsconfig.app.json、tsconfig.spec.json），要确保你修改的是应用实际使用的那个配置文件，而不是根目录的tsconfig.json。

3. 调整target和module的配合设置 #

尝试把target也设置为esnext，同时保留module: esnext：

"compilerOptions": {
  "outDir": "./dist/out-tsc",
  "noEmitOnError": true,
  "target": "esnext",
  "module": "esnext",
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "sourceMap": true,
  "moduleResolution": "node",
  "declaration": false,
  "lib": [ "es2016", "dom" ]
}

错误提示提到"targeting ECMAScript 2015 modules"，可能是target设置和module设置不匹配导致的，虽然你用了es2016作为target，但TypeScript在处理动态导入时可能需要更宽松的target设置。

4. 确认动态导入的语法正确 #

确保你使用的是标准的动态导入语法，比如：

// 正确写法：使用await
const module = await import('./path/to/your/module');
// 或者用Promise.then
import('./path/to/your/module').then(module => {
  // 处理模块逻辑
});

避免在静态导入的位置误用动态导入，比如：

// 错误写法
import * as module from './path/to/module'();

5. 补充lib配置的完整性 #

虽然你已经包含了es2016，但可以尝试添加esnext到lib数组里，确保TypeScript能识别所有ESNext特性：

"lib": [ "es2016", "esnext", "dom" ]

如果以上方法都试过还是不行，考虑到Angular 5本身比较老旧，若项目允许的话，升级到更高版本的Angular会从根本上解决这类兼容性问题——后续版本对动态模块导入的支持更成熟完善。

内容的提问来源于stack exchange，提问作者Taher