Unexpected token ' in JSON at position 0 - After running ng-build/serve a few times

[ilikeprograms]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 7

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.11-webpack.8
node: 6.5.0
os: win32 x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

As per #1922 followed @SeekingMonkey instructions and it all worked fine.
Copies newly created files (including node_modules/ to existing project).
Ran ng-serve still worked just fine.
Migrate existing app into src/app and all worked fine.
Used Ctl + C to exit ng-serve
Tried doing ng-build and get the error.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

Unexpected token ' in JSON at position 0
SyntaxError: Unexpected token ' in JSON at position 0
at Object.parse (native)
at C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:29:21
at Array.map (native)
at findLoadChildren (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:28:10)
at C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:48:9
at Array.forEach (native)
at Object.findLazyModules (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:47:10)
at Object.getWebpackCommonConfig (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\webpack-build-common.ts:18:43)
at new NgCliWebpackConfig (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\models\webpack-config.ts:13:30)
at Class.run (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\tasks\build-webpack.ts:16:22)
at Class.run (C:\Git\insight-frontend\node_modules\angular-cli\addon\ng2\commands\build.ts:49:26)
at Class. (C:\Git\insight-frontend\node_modules\angular-cli\lib\models\command.js:152:17)
at lib$rsvp$$internal$$tryCatch (C:\Git\insight-frontend\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (C:\Git\insight-frontend\node_modules\rsvp\dist\rsvp.js:1048:17)
at C:\Git\insight-frontend\node_modules\rsvp\dist\rsvp.js:331:11
at lib$rsvp$asap$$flush (C:\Git\insight-frontend\node_modules\rsvp\dist\rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

1. Mention any other details that might be useful.

Issue seems to be after doing the ng-serve and then exiting, so very strange this is happening after that point when you try to do another build/serve.

---

Thanks! We'll be in touch soon.

[celliott181]

Same issue. I can generate a new project, but the minute I try to move my app sources in and ng init things, all hell breaks loose.

Windows 10 x64, TypeScript 2.0.0, webpack.8 release, Node v6.5.

c:\Conductor>ng build
Unexpected token ' in JSON at position 0
SyntaxError: Unexpected token ' in JSON at position 0
at Object.parse (native)
at c:\Conductor\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:29:21
at Array.map (native)
at findLoadChildren (c:\Conductor\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:28:10)
at c:\Conductor\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:48:9
at Array.forEach (native)
at Object.findLazyModules (c:\Conductor\node_modules\angular-cli\addon\ng2\models\find-lazy-modules.ts:47:10)
at Object.getWebpackCommonConfig (c:\Conductor\node_modules\angular-cli\addon\ng2\models\webpack-build-common.ts:18:43)
at new NgCliWebpackConfig (c:\Conductor\node_modules\angular-cli\addon\ng2\models\webpack-config.ts:13:30)
at Class.run (c:\Conductor\node_modules\angular-cli\addon\ng2\tasks\build-webpack.ts:16:22)
at Class.run (c:\Conductor\node_modules\angular-cli\addon\ng2\commands\build.ts:49:26)
at Class.<anonymous> (c:\Conductor\node_modules\angular-cli\lib\models\command.js:152:17)
at lib$rsvp$$internal$$tryCatch (c:\Conductor\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (c:\Conductor\node_modules\rsvp\dist\rsvp.js:1048:17)
at c:\Conductor\node_modules\rsvp\dist\rsvp.js:331:11
at lib$rsvp$asap$$flush (c:\Conductor\node_modules\rsvp\dist\rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

[ilikeprograms]

I have noticed that I move back to the original src/app and it still wasnt working.
Update my package.json to have the same dependencies as the new RC6.
https://github.com/angular/quickstart/pull/202/files

Still nothing.
So I got rid of app/ and src/app0/ which are the files from my existing project and it seems to work ...

#1891

Found from here that webpack doesnt support the lazy loading, so perhaps its related to that?

[ilikeprograms]

Looks like it is to do with the lazy loading.
I removed the routing entry that does the lazy loading and now it works as expected:

// {
    //     path: 'callcentre',
    //     loadChildren: 'app/callcentre/callcentre.module#CallCentreModule'
    // },

[celliott181]

@ilikeprograms you're right! I was able to pinpoint this to my use of { loadChildren: 'route.module#module' } in my routing config (route being whatever route I'm loading). Replacing those with component properties allows ng serve and ng build to work, but then nothing ever loads because I designed for lazy loading.

[intellix]

you can fix lazy loading by wrapping those with backticks instead:

{
  path: `callcentre`,
  loadChildren: `app/callcentre/callcentre.module#CallCentreModule`
}

[ilikeprograms]

Hmmmmm. Very nice idea. How does that work ?

M: +44 (0)7428 759630
E: tom@ilikeprograms.com
Home Page: http://ilikeprograms.com
LinkedIn: http://uk.linkedin.com/in/ilikeprograms/

On 2 Sep 2016, at 19:05, Dominic Watson notifications@github.com wrote:

you can fix lazy loading by wrapping those with backticks instead:

{
path: callcentre,
loadChildren: app/callcentre/callcentre.module#CallCentreModule
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[celliott181]

Haha backticks to the rescue! Nice fix!

[blackfan23]

Very nice catch with the backticks indeed. Thx! I am also interested in the explanation.

[mjolk]

Single quotes are not valid JSON?

[deebloo]

@mjolk nope. Double quotes only for JSON

[deebloo]

@mjolk although it is important to point out that JSON and JavaScript objects at not exactly the same thing.

[mjolk]

on second thought it's indeed weird the backticks do work, must be some transform done somewhere. or something ;)
ps maybe something to do with template literals?