Getting error on 'npm start'

[pkreddy04]

Steps to reproduce this:

• Using windows 10, latest version of VS code
• Installed the extension 'Web Template Studio 2.0'
• Launched to generate a new project in WTS, chose Angular + Node
• Chose 1 page of each of the 4 page types in Blank, Grid, List, Master detail (No edits done to any files)
• Now do npm install and then npm start, you should see the error I am seeing below
• version: v10.16.2 (node), 6.8.0 (npm)

File: C:\pkr\test\Ang\myApp\myApp\src\app\app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '',   redirectTo: '/blank', pathMatch: 'full' },
  {
    path: 'blank',
    loadChildren: () => import('./app-shell/blank/blank.module').then(mod => mod.BlankModule)
  },
  {
    path: 'master-detail',
    loadChildren: () => import('./app-shell/master-detail/master-detail.module').then(mod => mod.MasterDetailModule)
  },
  {
    path: 'grid',
    loadChildren: () => import('./app-shell/grid/grid.module').then(mod => mod.GridModule)
  },
  {
    path: 'list',
    loadChildren: () => import('./app-shell/list/list.module').then(mod => mod.ListModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

PS C:\pkr\test\Ang\myApp\myApp> npm start

> myApp@0.1.0 start C:\pkr\test\Ang\myApp\myApp
> concurrently "yarn start-frontend || npm run start-frontend" "yarn start-backend || npm run start-backend"

[0] 'yarn' is not recognized as an internal or external command,
[0] operable program or batch file.
[1] 'yarn' is not recognized as an internal or external command,
[1] operable program or batch file.
[1]
[1] > myApp@0.1.0 start-backend C:\pkr\test\Ang\myApp\myApp
[1] > nodemon server/server.js
[1]
[0]
[0] > myApp@0.1.0 start-frontend C:\pkr\test\Ang\myApp\myApp
[0] > ng serve --port=3000 --o --proxy-config proxy.config.json
[0]
[1] [nodemon] 1.19.1
[1] [nodemon] to restart at any time, enter `rs`
[1] [nodemon] watching: *.*
[1] [nodemon] starting `node server/server.js`
[0] ** Angular Live Development Server is listening on localhost:3000, open your browser on http://localhost:3000/ **
[0]
[0] Date: 2019-08-23T19:42:05.271Z
[0] Hash: 62be43686485ca8a5d34
[0] Time: 20879ms
[0] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[0] chunk {main} main.js, main.js.map (main) 93.9 kB [initial] [rendered]
[0] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 241 kB [initial] [rendered]
[0] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
[0] chunk {styles} styles.js, styles.js.map (styles) 956 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.47 MB [initial] [rendered]
[0] ERROR in ./src/app/app-routing.module.ts 8:43
[0] Module parse failed: Unexpected token (8:43)
[0] You may need an appropriate loader to handle this file type.
[0] |     {
[0] |         path: 'blank',
[0] >         loadChildren: function () { return import('./app-shell/blank/blank.module').then(function (mod) { return mod.BlankModule; }); }
[0] |     },
[0] |     {
[0]
[0] i ｢wdm｣: Failed to compile.

[jasmingoh]

Hello @pkreddy04 , it would be awesome if you let us know to to reproduce this! Did you change any of the generated files? Can you try running npm install again?

[pkreddy04]

Hi @jasmingoh , I have updated the description with the steps to repro.

I tried doing and npm install and npm start on the project which was created, still see the same error as reported

Let me know if you want me try anything or you need any other info from me. Thanks

[SahilTara]

Hey @pkreddy04, would you be able to tell me your node and npm versions?

Edited by @Tanya0609:
The line loadChildren: function () { return import('./app-shell/blank/blank.module').then(function (mod) { return mod.BlankModule; }); } failed is lazy loading syntax. It is a fairly new syntax. It may not be well-supported by some lower versions.

[pkreddy04]

Hi @SahilTara, Updated desc. Thanks

[Tanya0609]

Hi @pkreddy04, we investigate more on this issue. This is related to upgrade to Angular 8 and the webpack package version under npm. This exists for other users using angular-cli too, link to their GitHub issue.

There are three approaches that you can try:

1. Could you try following commands?

rm -rf node_modules
rm package-lock.json
npm install --save-exact acorn@6.1.0
npm install

2. If it still doesn't work, could you try to use yarn instead of npm?

yarn

yarn will solve the problem

[Tanya0609]

More quote from that issue post:

acorn fixed the issue in 6.2.0 via acornjs/acorn#834
webpack updated to acorn to 6.2 in webpack 4.35.3
So as soon as you are on webpack >= 4.35.3, this error will go away

[SahilTara]

Also: angular/angular-cli#14589 (comment)
Try this before switching to yarn. If this solution fixes your issue then we'll just have to update our dependencies probably.

It does have to do with webpack and such though as Tanya mentioned earlier.

[sibille]

Hi @pkreddy04, is this still an issue?

[pkreddy04]

Hi All,
I was able to try steps listed from @Tanya0609

rm -rf node_modules
rm package-lock.json
npm install --save-exact acorn@6.1.0
npm install

And that resolved the issue