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

Posted 2023-02-19

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

【英文标题】：Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'

【发布时间】：2019-10-15 23:01:33

【问题描述】：

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

【参考方案1】：

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

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

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

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

【参考方案2】：

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

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案6】：

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

【参考方案7】：

我认为正确的做法是调整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 配置文件，当然除非它们都共享相同的配置，但很可能并非如此。

【参考方案8】：

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

【讨论】：

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

是的，请参考这里。 ***.com/questions/36916989/…

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

是的。你拯救了我的一天。

谢谢。我也有这个。

【参考方案9】：

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

【讨论】：

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