ChatGPT解决这个技术问题 Extra ChatGPT

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

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


T
Tony Ngo

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

ng new 默认情况下不使用它。有原因吗?
当我取消注释 polyfills 中的 IE11 部分时,它似乎在 Edge、Chrome、Firefox 和 IE11 中有效,所以我很高兴。
我必须从我的 tsconfig.app.json 文件中删除 "module": "es2015"
@ranbuch,我遇到了同样的问题,但没有删除该行,我也将其更改为 "module": "esnext"
对我来说是tsconfig-aot.json。我已将它从 es2015 更改为 esnext
r
rlandster

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


我没有 tsconfig.app.json 文件。我应该创建一个吗?
是的,请参考这个。 stackoverflow.com/questions/36916989/…
在 IDEA Intelij 中,我遇到了同样的问题。您需要重新打开项目。
是的。你拯救了我的一天。
谢谢。我也有这个。
N
Niz

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


我们可以避免在两个文件中添加“module”:“esnext”,我们可以将它放在 tsconfig.json 中,但不能放在 tsconfig.app.json 中,因为这已经扩展了 tsconfig.json。
Z
Zach Gollwitzer

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

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


是的,我必须在 tsconfig.json 和 tsconfig.app.json 中添加 module: 'esnext'
我同意@Zach 的回答。始终使用最具体的 Typescript 配置文件,当然除非它们都共享相同的配置,但很可能并非如此。
D
Dharman

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


A
Abhinav Kumar

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

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

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

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

R
Rashid Bukhari

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

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


F
Fouad Boukredine

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


N
Nibia

如果你使用 Ionic 框架和 VSCode,你需要更新你的 Typescript IDE 版本(> 4)!


S
Sameh

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

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

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

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅