Angular10模块加载问题 Dynamic imports are only supported when the ‘--module‘ flag is set to ‘es2020‘, ‘es

1.背景介绍

对一个angular项目进行升级，将angular升级到10，执行启动命令时遇到了模块加载问题：

2.问题描述

错误信息

Dynamic imports are only supported when the '--module' flag is set to 
'es2020', 'esnext', 'commonjs', 'amd', 'system', or 'umd'.
9 loadChildren: () => import('app/user/module').then(m => m.UserModule),

找到了报错信息里的位置，对比一下升级前后变化

升级前

   loadChildren: 'app/user/module#UserModule',

升级后

    loadChildren: () => import('app/user/module').then(m => m.UserModule),

3.解决方案

网上的方案需要修改 tsconfig.json 的"module": "esnext"，
其实主要还是保证 tsconfig.app.json 里的module的值为‘esnext’

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",  // 这一行
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "esnext",  // 这一行
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

参考