Skip to content

Invalid JSON character when running ng update @angular/cli #10715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
cado1982 opened this issue May 8, 2018 · 18 comments
Closed

Invalid JSON character when running ng update @angular/cli #10715

cado1982 opened this issue May 8, 2018 · 18 comments

Comments

@cado1982
Copy link

cado1982 commented May 8, 2018

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
Copy link

I have the same issue as mentioned over at #10396

@YoannBureau
Copy link

Same here

@cado1982
Copy link
Author

cado1982 commented May 8, 2018

@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
Copy link

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
Copy link

@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
Copy link

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

@Swellenator
Copy link

@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
Copy link

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

@JoostvdB94
Copy link

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

@Ventzy
Copy link

Ventzy commented Oct 18, 2018

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
Copy link

duard commented Oct 22, 2018

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

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

@FrankiePo
Copy link

FrankiePo commented Oct 31, 2018

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

@Tyler-V
Copy link

Tyler-V commented Nov 8, 2018

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.

@azollai
Copy link

azollai commented Nov 23, 2018

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.

@ryanbasnet
Copy link

@Swellenator 's solution worked for me.

@learnTech2022
Copy link

learnTech2022 commented Dec 24, 2018

@ChrisMBarr I have tried everything you mentioned, i cross checked all the files ( angular.json, package.json, tsconfig.json, tslint.json etc ) for their encoding at the right bottom of the VS Code, they all are in UTF-8 format and i could not see any other way to fix this issue.

I am trying to migrate my angular application from angular 6 to angular 7, and when i try executing following command in the terminal, i get below error

Command:
ng update @angular/cli @angular/core

Error:
Unexpected token < in JSON at position 0

@maxn0d3x
Copy link

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

same here ! :)

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

16 participants