Jhipster: lazy-loading module loadChildren dynamic import not working on Angular 8

Question

I'm using dynamic import so I have to change my tsconfig.json like this to target my code to esnext module.

./src/main/webapp/app/app-routing.module.ts 14:40
Module parse failed: Unexpected token (14:40)
File was processed with these loaders:
 * ./node_modules/angular2-template-loader/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/angular-router-loader/src/index.js
 * ./node_modules/tslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|                 {
|                     path: 'admin',
>                     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
|                 },
|                 ...errorRoute,

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext", 
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "target/classes/static/app",
    "lib": ["es7", "dom"],
    "typeRoots": ["node_modules/@types"],
    "baseUrl": "./",
    "paths": {
      "app/*": ["src/main/webapp/app/*"]
    },
    "importHelpers": true,
    "allowJs": true
  },
  "include": ["src/main/webapp/app", "src/test/javascript/"],
  "exclude": ["node_modules"]
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { errorRoute } from './layouts';
import { DEBUG_INFO_ENABLED } from 'app/app.constants';

@NgModule({
  imports: [
    RouterModule.forRoot(
      [
        {
          path: 'admin',
          loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
        },
        ...errorRoute,
      ],
      { enableTracing: DEBUG_INFO_ENABLED }
    ),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

Had to add the acorn dependency to force webpack to use the correct versions.

See there for more info on the issue: webpack/webpack#8656

and please check this issue jhipster/generator-jhipster/#9926 .