Angular build throwing error (JSON.parse(stripJsonComments(content)))

Question

I am using angular nx with nestjs. When project is cloned and run yarn command on it, it builds successfully but when even I install any package and compile the project. it throws the error:

**D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\utils\fileutils.js:44
    return JSON.parse(stripJsonComments(content));
                ^
SyntaxError: Unexpected token } in JSON at position 562
    at JSON.parse (<anonymous>)
    at Object.parseJsonWithComments (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\utils\fileutils.js:44:17)
    at new TargetProjectLocator (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\core\target-project-locator.js:22:46)
    at buildExplicitTypeScriptDependencies (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\core\project-graph\build-dependencies\explicit-project-dependencies.js:8:34)
    at D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\core\project-graph\project-graph.js:60:41
    at Array.forEach (<anonymous>)
    at buildProjectGraph (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\core\project-graph\project-graph.js:60:26)
    at Object.createProjectGraph (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\core\project-graph\project-graph.js:40:30)
    at Object.<anonymous> (D:\projectNAme\nrwl\node_modules\@nrwl\workspace\src\command-line\run-one.js:16:46)
    at Generator.next (<anonymous>)
[21:31:39] 'deployLocalAPI' errored after 820 ms
[21:31:39] Error: Command failed: cd nrwl && nx serve api
    at checkExecSyncError (node:child_process:636:11)
    at Object.execSync (node:child_process:672:15)
    at Object.exec (D:\projectNAme\/gulpfile.babel.js:36:8)
    at D:\projectNAme\_config\gulp\tasks\deploy\apps\api\/deployLocal.js:41:10
    at deployLocalAPI (D:\projectNAme\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (node:domain:413:15)
    at runBound (node:domain:424:12)
    at asyncRunner (D:\projectNAme\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (node:internal/process/task_queues:75:11)**

and following are the versions I am using:

"@angular-devkit/build-angular": "~0.1100.1",
"@angular/cli": "~11.0.0",
"@angular/compiler-cli": "^11.0.0",
"@angular/language-service": "^11.0.0",
"@nestjs/schematics": "^7.0.0",
"@nestjs/testing": "^7.0.0",
"@nrwl/cli": "11.0.2",
"@nrwl/cypress": "11.0.2",
"@nrwl/eslint-plugin-nx": "11.0.2",
"@nrwl/jest": "11.0.2",
"@nrwl/nest": "11.0.2",
"@nrwl/node": "11.0.2",
"@nrwl/tao": "11.0.2",
"@nrwl/workspace": "11.0.2",
"@types/jest": "26.0.8",
"@types/node": "12.12.38",
"@typescript-eslint/eslint-plugin": "4.3.0",
"@typescript-eslint/parser": "4.3.0",
"codelyzer": "^6.0.0",
"cypress": "^5.5.0",
"dotenv": "6.2.0",
"eslint": "7.10.0",
"eslint-config-prettier": "6.0.0",
"jest": "26.2.2",
"jest-preset-angular": "8.3.1",
"prettier": "2.1.2",
"ts-jest": "26.4.0",
"ts-node": "~7.0.0",
"tslint": "~6.0.0",
"typescript": "~4.0.3"

Answer 1

This problem occurs when we inadvertently forget a comma in the end of a JSON object inside a .json file in your project. Usually, it happens after an edit to tsconfig.json.

Because of that lonely and unnecessary comma, the JSON parser cannot "find" nor "understand" the closing braces, because it is waiting for another JSON property, therefore the error:

"Unexpected token } in JSON"

This is an example that should yield such error for tsconfig.json (e.g., in Angular 11 projects with VSCode):

"angularCompilerOptions": {
    "strictTemplates": true,
    "fullTemplateTypeCheck": true,<----- this last comma might be the culprit
  },

Solution, check the integrity of the structure of your recently edited json files for lonely commas or lost braces. If it is indeed any lonely comma, just removing it and saving the file should be enough.