Angular 8-延迟加载模块:错误TS1323:仅当'--module'标志为'commonjs'或'esNext'时才支持动态导入


107

当我将Angular从7更新到Angular 8时,出现延迟加载模块错误

我尝试了角度升级指南中提供的选项

进行了以下更改:

之前

    loadChildren: '../feature/path/sample- 
                         tage.module#SameTagModule'

   loadChildren: () => import('../feature/path/sample- 
                      tags.module').then(m => m.CreateLinksModule)

错误TS1323:仅当'--module'标志为'commonjs'或'esNext'时,才支持动态导入。

Answers:


205

您正在使用动态导入,因此必须像这样更改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"
    ]
  }
}

还要确保检查tsconfig.app.json没有类似的模块和目标配置

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

4
ng new默认情况下不使用它。有什么原因吗?
Helzgate

2
当我取消对polyfills中的IE11部分的注释时,它似乎可以在Edge,Chrome,Firefox和IE11中使用,所以我很高兴。
赫尔兹盖特

12
我不得不"module": "es2015"tsconfig.app.json文件中删除该行
ranbuch

5
@ranbuch,我遇到了同样的问题,但是没有删除该行,我也将其更改"module": "esnext"为。
阿尔法·布拉沃

tsconfig.json文件更新后仍然面临相同的问题事件
Gaurav Aggarwal

25

仅添加到@Tony的anwser中,您可能还需要在tsconfig.app.json中执行相同的操作(更改为“ module”:“ esnext”)。在我的情况下,tsconfig.json已经使用esnext作为模块,但是tsconfig.app.json仍使用es2015,这导致了此错误。


3
我们可以避免在两个文件中都添加“ module”:“ esnext”,我们可以将其放在tsconfig.json中,但不能放在tsconfig.app.json中,因为这已经扩展了tsconfig.json。
拉朱佩达(RajuPedda)

15

只是想将我的经验添加到@Tony的答案中。更改后tsconfig.json,仍然显示错误(红色下划线)。仅在重新打开编辑器(我使用VSCode)之后,我才看到红色下划线消失了。


我没有tsconfig.app.json文件。我应该创建一个吗?
标记


很有帮助。谢谢:)
Praveen Kumar Palai

1
在IDEA Intelij中,我遇到了同样的问题。您需要重新打开该项目。
NieMaszNic

是的 你救了我的日子。
Shailesh Pratapwar

12

我认为这样做的正确方法是调整tsconfig.app.json而不是调整tsconfig.json

tsconfig.app.json

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

tsconfig.app.json是Angular 工作区根目录下方的应用程序专用的Typescript配置文件。存在该文件是为了使您如果要构建一个包含多个应用程序的Angular工作区,则可以为每个应用程序分别调整Typescript配置,而不必编写在应用程序之间重叠的冗余配置属性(因此该属性)。tsconfig.app.jsonextends

从技术上讲,您根本不需要tsconfig.app.json。如果你删除它,你将不得不放置"module": "esnext"tsconfig.json。如果您将其保留在此处,它将优先于tsconfig.json,因此您只需在中添加"module":"esnext"tsconfig.app.json


是的,我不得不添加模块:两个tsconfig.json“esnext”和tsconfig.app.json
RDV

0

我通过执行以下步骤步骤1(在tsconfig.json中将“模块”:“ es2015”更改为“模块”:“ AMD”)来解决此错误

步骤2:在应用程式根目录中建立新档案tsconfig.app.json,复制Tony Ngo的程式码并贴入,即可解决这个问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.