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

Question

After migrating angular project to latest version which is angular 13 some dynamic import of module not working while compile the project in production mode however it works while I use ng serve but not work while used ng build for production mode. Here is the exact error while I try to build the project in prod mode:

./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)

Note: answer if you know how to solve this error in angular project not in react or vue thank you. Also I did research but did not find any solution for angular project. I have also add these dependency to my package.json but no luck:

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

Here is my 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

I have find the solution. It was a version mismatch. I have used nebular in my project and I did migration of my project from angular version 8 to latest which is 13 now. After the project migration I also did version upgrading for nebular too from 6.x to 8.x.

During the migration and version upgrading for nebular the @angular/cdk version was still on old version which was 8.x and it was causing build failed. Finally I upgrade the @angular/cdk version from 8.x to 12.x which is the recommended version for nebular version 8 too.

NOTE: if you use ng build --prod for building your project you are likely going to have build failed error there is a high chance but not sure. So, if you are using angular version 13 use ng build --configuration to build your project.