Angular 8 - 延迟加载模块：错误 TS1323：只有在 '--module' 标志为 'commonjs' 或 'esNext' 时才支持动态导入。

Question

Angular 8 - 延迟加载模块：错误 TS1323：只有在 '--module' 标志为 'commonjs' 或 'esNext' 时才支持动态导入。

javascriptangulartypescriptmoduleangular8

182

当我将Angular从7更新到Angular 8时，出现了懒加载模块的错误。

我尝试了在Angular升级指南中提供的选项。

进行了以下更改:

之前

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

之后

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

错误 TS1323：只有当'--module'标志为'commonjs'或'esNext'时，才支持动态导入。

- RajuPedda

10个回答

48

我想在Tony的回答基础上，分享我的经验。在更改tsconfig.json后，依然显示错误（红色下划线）。只有重新打开编辑器（我使用的是VSCode），才看到红色下划线消失。

- iconique

我没有tsconfig.app.json文件。我该创建一个吗？ - Mark

是的，请参考这个链接。 https://dev59.com/p1oU5IYBdhLWcg3w7qMt - iconique

6

在 IDEA Intelij 中我遇到了相同的问题。您需要重新打开项目。 - NieMaszNic

是的，你救了我的一天。 - Shailesh Pratapwar

谢谢。我也有这个问题。 - Julio W.

37

只是在Tony的答案上增加一点，你可能还需要在tsconfig.app.json中做同样的改变（将“module”更改为“esnext”）。在我的情况下，tsconfig.json已经使用esnext作为模块，但tsconfig.app.json仍然使用es2015，导致了这个错误。

- Niz

5

我们可以避免在这两个文件中添加 "module": "esnext"，而是将其放在 tsconfig.json 中，但不要放在 tsconfig.app.json 中，因为它已经在扩展 tsconfig.json。 - RajuPedda

28

我认为正确的做法是调整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配置文件。存在 tsconfig.app.json 是为了当您构建一个包含多个应用程序的Angular工作区时，可以单独调整每个应用程序的TypeScript配置，而不必编写在应用程序之间重复的重叠配置属性（因此使用extends属性）。

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

- Zach Gollwitzer

是的，我不得不在 tsconfig.json 和 tsconfig.app.json 中添加了模块：'esnext'。 - RDV

我同意@Zach的答案。除非它们都共享相同的配置，否则始终使用最具体的Typescript配置文件，但这很可能不是情况。 - KareemJ

4

只需运行以下命令即可更新Angular版本，错误将消失。

ng update @angular/core @angular/cli --next

之后，在tsconfig.json文件中更改目标和模块。

"target": "esnext",
"module": "esnext",

- ganesh lankadasu

谢谢您的建议，对我很有帮助。现在所有路由都正常工作了。 - Vishesh

3

我通过在tsconfig.app.json文件中添加"include": ["src/**/*.ts"]来解决这个问题。

- piyush gautam

1

我通过以下步骤解决了这个错误：步骤1：在tsconfig.json中将"module": "es2015"更改为"module": "AMD"

步骤2：在应用程序根目录中创建一个新的文件tsconfig.app.json，复制Tony Ngo的代码并粘贴，然后该问题将得到解决。

- Rashid Bukhari

0

我在使用 Angular 13 时遇到了这个问题，我发现有些服务出现了这个问题，而其他服务则没有，区别在于

@import { Injectable } from '@angular/core/';

虽然在 Angular 9 上编译时没有任何问题，但解决方法是将末尾的 / 删除，变成'

@import { Injectable } from '@angular/core';

- Sameh

0

我的Angular版本是8.2，我只需将"module": "es2015"更改为"module": "es2020"即可解决问题。

- Fouad Boukredine

0

如果您正在使用Ionic框架和VSCode，您需要更新您的Typescript IDE版本（> 4）！

- Nibia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tony Ngo · Accepted Answer

您正在使用动态导入，因此您需要更改您的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"
  ]
}