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"
]
}
}