Angular-cli: Error: support for the experimental syntax 'dynamic import' isn't currently enabled

[elvisbegovic]

🐞 Bug report

• [x] serve

Is this a regression?

Yes it was working with angular and cli 9.0.0-rc.2

Description

Updating my project from 9.0.0-rc.2 to 9.0.0-rc.3 makes ng serve to fail

🔬 Minimal Reproduction

I tried to repro in a fresh project without success.

1. from 9.0.0-rc.2 run ng update for all package core/cli/material/cdk
2. update fail because I had ngcc postinstall
3. remove postinstall in package.json
4. remove node_modules folder
5. run npm install
6. run ng update --migrate-only --from=8 for core/cli/material/cdk
7. run ng s fail to start!

PS: I tried one more time steps 4, 5, 7 => same error

🔥 Exception or Error

ERROR in ./src/app/app.module.ts
Module build failed (from C:/Users/eb/wproj/iii/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\eb\wproj\iii\projects\iii\src\app\app.module.ts: Support for the experimental syntax 'dynamicImport' isn't currently enabled (21:37):

  19 |     { path: 'login', component: LoginComponent },
  20 |     // private
> 21 |     { path: '', loadChildren: () => import('projects/iii/src/app/wrapper/wrapper.module')
     |                                     ^
  22 |             .then(m => m.WrapperModule), canLoad: [CanLoadLoginGuard] }
  23 | ];
  24 | if (environment.production) {

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
    at Parser.raise (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:6930:17)
    at Parser.expectPlugin (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:8328:18)
    at Parser.parseExprAtom (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9425:14)
    at Parser.parseExprSubscripts (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9165:23)
    at Parser.parseMaybeUnary (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9145:21)
    at Parser.parseExprOps (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9011:23)
    at Parser.parseMaybeConditional (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:8984:23)
    at Parser.parseMaybeAssign (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:8930:21)
    at Parser.parseFunctionBody (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:10159:24)
    at Parser.parseArrowExpression (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:10118:10)
    at Parser.parseParenAndDistinguishExpression (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9744:12)
    at Parser.parseExprAtom (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9503:21)
    at Parser.parseExprSubscripts (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9165:23)
    at Parser.parseMaybeUnary (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9145:21)
    at Parser.parseExprOps (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:9011:23)
    at Parser.parseMaybeConditional (C:\Users\eb\wproj\iii\node_modules\@babel\parser\lib\index.js:8984:23)
** Angular Live Development Server is listening on 0.0.0.0:80, open your browser on http://localhost:80/ **

🌍 Your Environment

Angular CLI: 9.0.0-rc.3
Node: 13.1.0
OS: win32 x64
Angular: 9.0.0-rc.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.3
@angular-devkit/build-angular     0.900.0-rc.3
@angular-devkit/build-optimizer   0.900.0-rc.3
@angular-devkit/build-webpack     0.900.0-rc.3
@angular-devkit/core              9.0.0-rc.3
@angular-devkit/schematics        9.0.0-rc.3
@angular/cdk                      9.0.0-rc.2
@angular/material                 9.0.0-rc.2
@ngtools/webpack                  9.0.0-rc.3
@schematics/angular               9.0.0-rc.3
@schematics/update                0.900.0-rc.3
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

✍️ Anything else relevant

cc @filipesilva

[filipesilva]

@clydin does this look familiar to you? It seems to be related to babel post processing.

[elvisbegovic]

By the way if this is a bug and if there's temporary workaround (like downgrade one specific package in the meantime), I'm highly interested.

[filipesilva]

I think downgrading to CLI rc.2 should be enough.

[neil-119]

I am seeing this as well. What I did to solve this temporarily is open node_modules/@angular-devkit/build-angular/src/dev-server/index.js and find where it says const i18nRule and modify it like so (add parserOpts):

const i18nRule = {
                test: /\.(?:m?js|ts)$/,
                enforce: 'post',
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            compact: false,
                            cacheCompression: false,
                            plugins,
                            parserOpts: {
                                plugins: ['dynamicImport'],
                            }
                        },
                    },
                ],
            };

Hoping the fixes above get pushed to npm soon!

[khalilou88]

thanks @neil-119

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}