将 @babel/plugin-syntax-dynamic-import 添加到 Babel 配置的 'plugins' 部分以启用解析。将角度迁移到 13 后答案

【问题标题】：Add @babel/plugin-syntax-dynamic-import to the 'plugins' section of your Babel config to enable parsing. after migrating angular to 13将 @babel/plugin-syntax-dynamic-import 添加到 Babel 配置的 'plugins' 部分以启用解析。将角度迁移到 13 后
【发布时间】：2022-01-18 08:15:47
【问题描述】：

在将 Angular 项目迁移到 Angular 13 的最新版本后，一些模块的动态导入在生产模式下编译项目时不起作用，但是当我使用 ng serve 时它可以工作，但在将 ng build 用于生产模式时不起作用。这是我尝试在 prod 模式下构建项目时的确切错误：

./src/app/app-routing.module.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
    SyntaxError: D:\frontapp\src\app\app-routing.module.ts: Support for the experimental syntax 'dynamicImport' isn't currently enabled (38:29):
    
      36 |     {
      37 |         path: 'home',
    > 38 |         loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
         |                             ^
      39 |         canActivate: [AuthGuard],
      40 |         runGuardsAndResolvers: 'paramsOrQueryParamsChange'
      41 |     },
    
    Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
        at Parser.raise (D:\frontapp\node_modules\@babel\parser\lib\index.js:6930:17)
        at Parser.expectPlugin (D:\frontapp\node_modules\@babel\parser\lib\index.js:8328:18)
        at Parser.parseExprAtom (D:\frontapp\node_modules\@babel\parser\lib\index.js:9425:14)
        at Parser.parseExprSubscripts (D:\frontapp\node_modules\@babel\parser\lib\index.js:9165:23)
        at Parser.parseMaybeUnary (D:\frontapp\node_modules\@babel\parser\lib\index.js:9145:21)
        at Parser.parseExprOps (D:\frontapp\node_modules\@babel\parser\lib\index.js:9011:23)
        at Parser.parseMaybeConditional (D:\frontapp\node_modules\@babel\parser\lib\index.js:8984:23)
        at Parser.parseMaybeAssign (D:\frontapp\node_modules\@babel\parser\lib\index.js:8930:21)
        at Parser.parseFunctionBody (D:\frontapp\node_modules\@babel\parser\lib\index.js:10159:24)
        at Parser.parseArrowExpression (D:\frontapp\node_modules\@babel\parser\lib\index.js:10118:10)

注意：如果您知道如何在 Angular 项目中解决此错误而不是在 react 或 vue 中，请回答，谢谢。我也做了研究，但没有找到任何角度项目的解决方案。我也将这些依赖项添加到我的package.json 但没有运气：

"@babel/core": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",

这是我的tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

【问题讨论】：

标签： angular babeljs webpack-loader

【解决方案1】：

我找到了解决办法。这是版本不匹配。我在我的项目中使用了 nebular，并且我将我的项目从 angular 版本 8 迁移到了最新版本，现在是 13。在项目迁移之后，我也对 nebular 进行了版本升级，从 6.x 升级到 8.x.

在 nebular 的迁移和版本升级过程中，@angular/cdk 版本仍在旧版本上，即8.x，导致构建失败。最后我将@angular/cdk版本从8.x升级到12.x，这也是nebular 8的推荐版本。

注意： 如果您使用ng build --prod 来构建您的项目，您很可能会遇到构建失败错误，但很有可能但不确定。因此，如果您使用 Angular 版本 13，请使用 ng build --configuration 来构建您的项目。

【讨论】：