Invalid JSON character when running ng update @angular/cli

[cado1982]

Versions

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.0
@angular-devkit/core         0.6.0
@angular-devkit/schematics   0.6.0
@schematics/angular          0.6.0
@schematics/update           0.6.0
rxjs                         6.1.0
typescript                   2.7.2

Repro steps

• npm install -g @angular/cli
• npm install @angular/cli@latest
• ng update @angular/cli

Observed behavior

Invalid JSON character: "" at 0:0.

Desired behavior

Configuration should be migrated to the new angular.json format. If there is a problem, an understandable error message should be shown.

Mention any other details that might be useful (optional)

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "<removed>"
  },
  "apps": [
    {
      "root": "Client",
      "outDir": "wwwroot",
      "assets": [
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "<removed>",
      "styles": [
        "../node_modules/@clr/icons/clr-icons.min.css",
        "../node_modules/@clr/ui/clr-ui.min.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "../node_modules/tether-drop/dist/css/drop-theme-arrows.css",
        "../node_modules/tether-drop/dist/css/drop-theme-arrows-bounce.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
        "../node_modules/@clr/icons/clr-icons.min.js",
        "../node_modules/tether/dist/js/tether.min.js",        
        "../node_modules/tether-drop/dist/js/drop.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "Client/**/*.ts",
      "project": "tsconfig.app.json"
    },
    {
      "files": "Client/**/*.ts",
      "project": "tsconfig.spec.json"
    },
    {
      "files": "Client/**/*.ts",
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "serve": {
      "ssl": true,
      "sslCert": "server.cert",
      "sslKey": "server.key"
    },
    "component": {}
  }
}

[Swellenator]

I have the same issue as mentioned over at #10396

[YoannBureau]

Same here

[cado1982]

@YoannBureau @Swellenator I managed to get this fixed. I simply opened my .angular-cli.json file in notepad++ and clicked Convert to UTF-8 from the Encoding menu before saving the file. Running ng update @angular/cli now works as expected. There must have been a hidden BOM at the start of the file.

[martindevos]

I was having the same problem but removing the bom didn't solve it.
Before removing the bom, I get this error immediately.
After removing the bom I get some output, but still the error in the end
ng update @angular/cli
Updating karma configuration
Updating configuration
Removing old config file (.angular-cli.json)
Writing config file (angular.json)
Invalid JSON character: "" at 0:0.
And nothing is created, updated or removed.
In Notepad++ I can't see any other strange characters.

[ChrisMBarr]

@cado1982's answer worked for me!

My .angular-cli.json was open in VSCode as a "UTF8 with BOM" encoding, but changing to to be "UTF8" and then running ng update @angular/cli finally worked and upgraded me as expected.

For those not familiar, in VSCode on the bottom toolbar on the right is shows the file encoding. Click this to show a menu to change it.

[tomvanoost]

@martindevos I fixed the issue by converting some more .json files (tsconfig, etc.) to UTF8.

[Swellenator]

@cado1982 .angular-cli.json was in UTF8, but tslint.json was UTF8 with BOM - I made it UTF8 and can finally progress. The problem was tslint.json.

[martindevos]

After converting all of my .json files to UTF8 (without BOM) as Tom suggested, it finally worked. Thanks alot !

[JoostvdB94]

It would however be nice when angular-cli shows the file with the JSON error :)

[Ventzy]

I got the same error with ng g library. I didn't had any encoding issues, however I had one excessive comma in tsconfig.json, which made it invalid json.

[duard]

I got the same problem, and I try everything and it dont work yet :-(

Invalid JSON character: "\"" at 3:6.

[FrankiePo]

I had the same issue
Solved by removing comments from tsconfig.json

[Tyler-V]

I'll second Ventyz's comment, ng g lib seems to add an additional entry for package_name/* which I keep removing when I generate new libraries, make sure the last element isn't trailing with an extra comma.