将@babel/plugin-syntax-dynamic-import添加到Babel配置的“plugins”部分以启用解析,

uyto3xhc  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(370)

将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)

注意:如果你知道如何解决这个错误,请回答,不要在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"
    ]
  }
}
iezvtpos

iezvtpos1#

我已经找到了解决方案。这是一个版本不匹配。我在我的项目中使用了nebular,我做了我的项目从Angular 版本8到最新版本13的迁移。项目迁移后,我也做了nebular的版本升级,从6.x8.x.
在nebular的迁移和版本升级过程中,@angular/cdk版本仍然是旧版本8.x,这导致了构建失败。最后,我将@angular/cdk版本从8.x升级到12.x,这也是nebular版本8的推荐版本。

**注意:**如果您使用ng build --prod来建置项目,您很可能会发生建置失败的错误,虽然可能性很高,但并不确定。因此,如果您使用的是Angular 版本13,请使用ng build --configuration来建置项目。

相关问题