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

Question

当我将 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'。

Answer 1

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

Answer 2

只想将我的经验添加到@Tony 的答案中。 更改

tsconfig.json

后仍然显示错误（红色下划线）。 重新打开编辑器后（我用的是VSCode）才看到红色下划线消失了。

Answer 3

只需添加到 @Tony 的 anwser，您可能还需要在 tsconfig.app.json 中执行相同的操作（更改为 "module": "esnext" ）。就我而言，tsconfig.json 已经使用 esnext 作为模块，但 tsconfig.app.json 仍在使用 es2015，这导致了此错误。

Answer 4

我认为正确的方法是调整

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 workspace 根目录下的 app 的 Typescript 配置文件。

tsconfig.app.json

的存在是为了，如果您正在构建一个包含 多个 应用程序的 Angular 工作区，您可以单独调整每个应用程序的 Typescript 配置，而无需编写在应用程序之间重叠的冗余配置属性（因此

extends 

财产）。

从技术上讲，你根本不需要

tsconfig.app.json

。如果删除它，则必须将

"module": "esnext"

放入

tsconfig.json

中。如果保留它，它将优先于

tsconfig.json

，因此您只需在

"module":"esnext"

中添加

tsconfig.app.json

行即可。

Answer 5

只需通过给出以下命令来更新角度版本。错误将会消失。

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

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

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

Answer 6

我仅通过添加解决了这个问题 “包括”：[“src / ** / *.ts”] 在我的 tsconfig.app.json 文件中。

Answer 7

我通过执行以下步骤解决了此错误 步骤1： “模块”：“es2015”到 tsconfig.json 中的“模块”：“AMD”

第2步： 在app根目录下新建一个文件tsconfig.app.json，复制Tony Ngo的代码并粘贴进去，这个问题就解决了。

Answer 8

我的角度版本是8.2，我通过将“module”：“es2015”更改为“module”：“es2020”来修复它

Answer 9

如果您使用 Ionic 框架和 VSCode，您需要更新您的 Typescript IDE 版本 (> 4)！

Answer 10

我在 Angular 13 上遇到了这个问题，我注意到有些服务有这个问题，而其他服务则没有，区别在于

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

虽然这在 Angular 9 上完美编译，没有任何问题，但修复方法是删除末尾的 / 变成'

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

Answer 11

就我而言，我在从 Angular 7 迁移到 Angular 14 时遇到了类似的问题。要解决此问题，我必须在下一个文件中将项目中的所有“模块”和“目标”属性更改为“es2020”：

• tsconfig.json
• tsconfig.app.json