angular-cli: Invalid JSON character when running ng update @angular/cli

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

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": {}
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 6
  • Comments: 18

Most upvoted comments

@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 fixed the issue by converting some more .json files (tsconfig, etc.) to UTF8.

@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.

@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.

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

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.

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

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

I had the same as @FrankiePo , I just got a comma at the end of an object in tsconfig.json. I think you should check your tsconfig.json, with e.g. https://jsonlint.com/ . Good luck.