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

Question

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

./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 中的此错误，请回答谢谢。我也做了研究，但没有找到 angular 项目的任何解决方案。我也将这些依赖项添加到我的 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"
    ]
  }
}

Answer 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 构建您的项目。

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

Add @babel/plugin-syntax-dynamic-import to the 'plugins' section of your Babel config to enable parsing. after migrating angular to 13

babeljs

angular

webpack-loader