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 中执行相同的操作(更改为"模块"："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 工作区根目录下的应用的 Typescript 配置文件。 该tsconfig.app.json的存在使得如果要构建包含多个应用程序的 Angular 工作区，则可以为每个应用程序单独调整 Typescript 配置，而无需编写应用程序之间重叠的冗余配置属性(因此extends属性(。

从技术上讲，您根本不需要tsconfig.app.json。 如果删除它，则必须将"module": "esnext"放在 tsconfig.json . 如果你把它保留在那里，它将优先于tsconfig.json，所以你只需要在tsconfig.app.json中添加"module":"esnext"行。

Answer 5

我只通过添加"include"： ["src/**/*.ts"]在我的 tsconfig.app.json 文件中。

Answer 6

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

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

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

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

Answer 7

我通过执行以下步骤来解决此错误第 1 步："模块"： "ES2015" 至"module"： tsconfig.json 中的 "AMD">

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

Answer 8

我的角度版本是 8.2，我只需将"模块"："es2015"更改为"模块"："es2020">

Answer 9

我在 angular 13 中遇到了这个问题，我注意到有些服务有这个问题，而另一些则没有，区别在于

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

虽然这完美编译，在 Angular 9 上没有问题，但修复方法是删除/在最后成为'

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