161

当我将 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”时才支持动态导入。

4

10 回答 10

295

您正在使用动态导入，因此您必须像这样更改 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"
  ]
}
于 2019-05-30T09:56:03.273 回答
41

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

于 2019-12-07T09:07:05.463 回答
35

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

于 2019-05-31T00:58:38.320 回答
25

我认为正确的方法是调整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是特定于应用程序的 Typescript 配置文件，位于 Angular工作区的根目录下。存在因此tsconfig.app.json，如果您正在构建一个其中包含多个应用程序的 Angular 工作区，您可以为每个应用程序单独调整 Typescript 配置，而无需编写在应用程序之间重叠的冗余配置属性（因此extends属性）。

从技术上讲，您根本不需要tsconfig.app.json。如果删除它，则必须将其"module": "esnext"放入tsconfig.json. 如果保留在那里，它将优先于tsconfig.json，因此您只需"module":"esnext"在tsconfig.app.json.

于 2019-12-19T01:15:24.567 回答
3

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

于 2020-10-31T07:56:13.750 回答
2

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

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

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

"target": "esnext",
"module": "esnext",
于 2021-04-27T03:57:51.373 回答
1

我通过执行以下步骤第 1 步来解决此错误： "module": "es2015" to "module": "AMD" in tsconfig.json

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

于 2020-04-22T07:40:27.480 回答
0

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

于 2020-10-26T19:54:33.463 回答
0

If you are using Ionic framework and VSCode you need to update your Typescript IDE version (> 4)!

于 2021-02-26T11:51:14.620 回答
0

我在使用 angular 13 时遇到了这个问题，我注意到有些服务有这个问题，而其他服务没有，区别在于

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

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

@import { Injectable } from '@angular/core';
于 2022-03-01T05:00:36.293 回答