Javascript Angular 8 - 延迟加载模块：错误 TS1323：仅当“--module”标志为“commonjs”或“esNext”时才支持动态导入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56375703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'
提问by RajuPedda
When I updated Angular from 7 to Angular 8, getting error for lazy loading modules
当我将 Angular 从 7 更新到 Angular 8 时，延迟加载模块出错
I have tried the options, which are there in the angular upgradation guide
我已经尝试了角度升级指南中的选项
Made the below changes:
进行了以下更改：
Before
前
loadChildren: '../feature/path/sample-
tage.module#SameTagModule'
After
后
loadChildren: () => import('../feature/path/sample-
tags.module').then(m => m.CreateLinksModule)
error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
错误 TS1323：仅当“--module”标志为“commonjs”或“esNext”时才支持动态导入。
回答by Tony Ngo
You are using dynamic import so you have to change your tsconfig.json like this to target your code to esnextmodule
您正在使用动态导入，因此您必须像这样更改 tsconfig.json 以将代码定位到esnext模块
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext", // add this line
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Also make sure to check tsconfig.app.json dont have module and target config something like this
还要确保检查 tsconfig.app.json 没有像这样的模块和目标配置
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
回答by Niz
Just adding to @Tony's anwser, you might also need to do the same (change to "module": "esnext" ) in the tsconfig.app.json. In my case the tsconfig.json was already using esnext as the module but the tsconfig.app.json was still using es2015 and that caused this error.
只需添加到@Tony 的 anwser，您可能还需要在 tsconfig.app.json 中执行相同操作（更改为 "module": "esnext" ）。在我的情况下，tsconfig.json 已经使用 esnext 作为模块，但 tsconfig.app.json 仍在使用 es2015 并导致此错误。
回答by Tai JinYuan
Just want to add my experience to @Tony's answer.
After changing tsconfig.jsonit still showed an error (red underline). Only after reopening the editor(I used VSCode) did I see the red underline disappear.
只是想将我的经验添加到@Tony 的回答中。更改tsconfig.json后仍然显示错误（红色下划线）。只有在重新打开编辑器（我使用 VSCode）后，我才看到红色下划线消失了。
回答by Zach Gollwitzer
I think the proper way to do this is to adjust tsconfig.app.jsonrather than tsconfig.json.
我认为这样做的正确方法是调整tsconfig.app.json而不是tsconfig.json.
tsconfig.app.json
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "esnext",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
tsconfig.app.jsonis the Typescript configuration file specific to the appthat sits beneath the root of the Angular workspace. The tsconfig.app.jsonexists so that if you are building an Angular workspace that has multipleapps in it, you can adjust the Typescript configuration separately for each app without having to write redundant configuration properties that overlap between the apps (hence the extendsproperty).
tsconfig.app.json是特定于应用程序的 Typescript 配置文件，位于 Angular工作区的根目录下。的tsconfig.app.json存在使得如果你正在构建具有角的工作区的多个在它的应用程序，则可以分别调节打字稿配置为每个应用而无需编写，所述应用程序（因此之间重叠冗余配置属性extends属性）。
Technically, you don't need tsconfig.app.jsonat all. If you delete it, you will have to place the "module": "esnext"in tsconfig.json. If you keep it there, it will take precedence over tsconfig.json, so you only need to add the "module":"esnext"line in tsconfig.app.json.
从技术上讲，您根本不需要tsconfig.app.json。如果删除它，则必须将其"module": "esnext"放入tsconfig.json. 如果你把它放在那里，它会优先于tsconfig.json，所以你只需要"module":"esnext"在tsconfig.app.json.
回答by Rashid Bukhari
i resolve this error by by doing following steps step 1: "module": "es2015" to "module": "AMD" in tsconfig.json
我通过执行以下步骤 1 来解决此错误：“模块”：“es2015”到“模块”：tsconfig.json 中的“AMD”
step 2: create a new file tsconfig.app.json in app root directory, copy code of Tony Ngo and paste into, then this problem will be resolved.
第二步：在app根目录新建一个tsconfig.app.json文件，将Tony Ngo的代码复制粘贴进去，问题就解决了。
