Upgrading to angular 6 fails during angular-cli migration with unexpected token.

[krotscheck]

Versions

6.0.0-rc.5

Repro steps

ng update @angular/cli --migrate-only --from=1

using the following .angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ui-sdk"
  },
  "packageManager": "yarn",
  "apps": [
    {
      "name": "lib",
      "root": "src/lib",
      "outDir": "lib",
      "assets": [],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "sym",
      "styles": [],
      "scripts": [
        "../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "demo",
      "root": "src/demo",
      "outDir": "demo",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "sym",
      "styles": [
        "vendor.scss",
        "styles.scss"
      ],
      "scripts": [
        "../../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
        "../../vendor/vts.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "e2e": "environments/environment.e2e.ts",
        "upgrade": "environments/environment.upgrade.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/lib/tsconfig.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/lib/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/demo/tsconfig.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/demo/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/testing/tsconfig.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/cli/tsconfig.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css"
  }
}

Observed behavior

mkrotscheck-a02:sdk mkrotscheck$ ng update @angular/cli --migrate-only --from=1
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
Unexpected token / in JSON at position 240

Desired behavior

Successful app migration, or helpful error :)

[krotscheck]

@StephenFluin

[krotscheck]

A bit of comment-out-line-by-line debugging: The issue appears to be the

"root": "path-with-directory/slash"

if I remove the subdirectory, it works like a charm.

[gnomeontherun]

I'm also having the same issue for Clarity, which you can find our project at https://github.com/vmware/clarity/tree/website/latest. The angular-cli.json file is at https://github.com/vmware/clarity/blob/website/latest/.angular-cli.json.

➜ npm install @angular/cli@next
...
added 31 packages, removed 564 packages and updated 39 packages in 12.81s
➜  ng update @angular/cli --from=1 --migrate-only
The Angular CLI configuration format has been changed, and your existing configuration can
be updated automatically by running the following command:

  ng update @angular/cli --migrate-only --from=1
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
Unexpected token / in JSON at position 838

I haven't been able to migrate even with the suggestion by @krotscheck.

[StephenFluin]

@hansl I think we already fixed this one, can you check?

[filipesilva]

@krotscheck and @gnomeontherun can you try with @angular/cli@6.0.0-rc.7? Using your .angular-cli.json files and running ng update @angular/cli, I did not see the errors.

[wopss]

@filipesilva I have the same problem with @angular/cli@6.0.0-rc.7 when upgrading from 1.7.4. My .angular-cli.json is

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "client"
    },
    "packageManager": "yarn",
    "apps": [
        {
            "root": "src/browser",
            "outDir": "../../Build/Client/ui",
            "assets": [],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "tsconfig": "tsconfig.app.json",
            "prefix": "app",
            "styles": [
                "styles/app.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "lint": [
        {
            "project": "src/browser/tsconfig.app.json",
            "exclude": "**/node_modules/**"
        }
    ],
    "defaults": {
        "styleExt": "scss",
        "class": {
            "spec": false
        },
        "component": {
            "spec": false
        },
        "directive": {
            "spec": false
        },
        "guard": {
            "spec": false
        },
        "module": {
            "spec": false
        },
        "pipe": {
            "spec": false
        },
        "service": {
            "spec": false
        }
    }
}

The output

> ng update @angular/cli --migrate-only --from=1
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
Unexpected token / in JSON at position 224

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0-rc.7
Node: 10.0.0
OS: win32 x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.10
@angular-devkit/build-angular     0.5.10
@angular-devkit/build-optimizer   0.5.10
@angular-devkit/core              0.5.10
@angular-devkit/schematics        0.5.10
@angular/cli                      6.0.0-rc.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.8
@schematics/angular               0.5.10
@schematics/update                0.5.10
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

[krotscheck]

@filipesilva No luck from me, though likely for unrelated reasons. We just refactored into a yarn workspaces based monorepo, and attempting to migrate our project from within the child workspaces gave me this:

mkrotscheck-a02:ui-sdk mkrotscheck$ ng update @angular/cli --migrate-only --from=1
Could not find a package.json. Are you in a Node project?

I suspect that issue's reported elsewhere.

(Side note - yeah, I know ng now supports its own monorepo-style structure, and I'm trying to use it for a different project. In this one, unfortunately, we're shipping more-than-just angular packages, so I a more traditional monorepo is called for)

[phl3x0r]

also getting this with rc.10:

$  ng update @angular/cli --migrate-only --from=1.7.4
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
Invalid JSON character: "\"" at 10:22.

10:22 of the original file contains outDir, so I assume the numbers refer to the generated file.

I will not provide the entire .angular-cli.json file here as it is very large and contains multiple apps, but perhaps a --verbose mode would be helpful in order to debug these issues?

[phl3x0r]

update:
this is still an issue with 6.0 final

[dottodot]

I can also confirm 6 final isn't working and get a very similar error

ng update @angular/cli --migrate-only --from=1.7.4
            Updating karma configuration
            Updating configuration
            Removing old config file (.angular-cli.json)
            Writing config file (angular.json)
Invalid JSON character: "\"" at 9:22.

[svenheden]

I can confirm that the issue still exists in 6.0 final

[Swellenator]

I am getting a slightly different error (6.0 final)

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.

I can't see how there is a problem at 0:0. The first character in .angular-cli.json is an open bracket {. Is there an encoding issue or something?

[phl3x0r]

@hansl perhaps this should be reopened?

[richinator38]

I'm getting the same as Swellenator in 6.0 final. My "root" = "src"

Note: I had to delete a private npm package reference in order to get past a "not found" error but then I got this error. Probably unrelated but wanted to mention it in case.

[cado1982]

For Invalid JSON character: "" at 0:0 please see the fix in #10715

[phl3x0r]

Right, so I've done some digging around and found that it's not actually the writing of the angular.json file that fails.
The error comes from the following step in updateSpecTsConfig(config):

const tsCfgAst = core_1.parseJsonAst(
        buffer.toString(),
        core_1.JsonParseMode.Loose
      );

Writing the buffer to console reveals the following string:

{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "../../../",
    "module": "commonjs",
    "target": "es5",
    "types": ["jasmine", "node"],
    "strict": false
  },
  "files": ["test.ts"  "polyfills.ts"
  ,],
  "include": ["./**/*.spec.ts", "**/*.d.ts", "**/*.ts", "../../../conf/**/*.ts"]
}

Which fails on the line "files": ["test.ts" "polyfills.ts"

However, when inspecting the actual file, it only has "files": ["test.ts"]
None of the tsconfig.spec.json files have any reference to polyfills.ts, so it's still a mystery how or why this suddenly shows up.

Commenting out that part from the chain, and the rest of the processes run by smoothly:
node_modules/@schematics/angular/migrations/update-6/index.js

...
return schematics_1.chain([
      migrateKarmaConfiguration(config),
      migrateConfiguration(config),
      // updateSpecTsConfig(config),
      updatePackageJson(config),
      updateTsLintConfig(),
      ...

[hansl]

This is a BOM bug that I've been following for a while. Dupe of #10644.

There is a similar bug (but much less fixable) for unicode characters in general, not sure how we're going to handle that one. For now, in most cases, PR angular/devkit#862 should fix this.

[tomvanoost]

I fixed the issue by converting most .json files (tsconfig, etc.) to UTF8, without BOM.

[StrangeCargo74]

All my files are UTF8 without BOM, but was still getting

Invalid JSON character: \ at 9:66.

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": ["node", "jasmine"]
},
"files": ["app-testbed.test.ts", "test.ts", "app-disco.test.ts" "shared/other/polyfills.ts"
,],
"include": ["/*.spec.ts", "/*.d.ts"]
}

I've commented out the ten or so lines in updateSpecTsConfig that appends the polyfills to the files and I'm rocking and rolling again.

[cado1982]

@StrangeCargo74, the BOM only affects position 0,0 of the file. Your error is on line 9 at position 66 and you're missing a comma between "app-disco.test.ts" and "shared/other/polyfills.ts"

[StrangeCargo74]

Indeed cado1982. There are two problems here, one is with the BOM (error at line 0), and another (i think) is the polyfills setting being incorrectly copied across during the update (error at line 9ish)

Just to be clear, my snippet is the console log of the buffer created in the updateSpecTsConfig function showing where the internal buffer was incorrect. I fixed it by commenting out the following lines in that function and copying the settings across manually.

// const polyfills = app.polyfills || defaults.polyfills;
// if (!filesAstNode) {
// // Do nothing if the files array does not exist. This means exclude or include are
// // set and we shouldn't mess with that.
// } else {
// if (filesAstNode.value.indexOf(polyfills) == -1) {
// json_utils_1.appendValueInAstArray(recorder, filesAstNode, polyfills);
// }
// }

[Rumsha001]

Hey,
After alot of research, I have come up with following solution and got success in updating my local project to Angular 6.0.1:

1. npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'6.0.1'
2. ng update rxjs
3. npm install rxjs@6 rxjs-compat@6 --save
4. ng update @angular/core
5. ng update @angular/material
6. npm install typescript@'>=2.7.0 <2.8.0'

Please respond and share!
Thanks

[Ks89]

I confirm the solution of @phl3x0r.
It's crazy, I know, but removing all lines in tsconfig files with test.ts and so on, I fixed this error.

PS: I'm using angular-cli 6.0.1

[andynrkri]

In my case, I had commented a script array entry with /*..*/ in angular.json. Removing this resolved the error. I believe it happened because JSON doesn't support any comments as per specification.

[affilnost]

I had similar problem, updating Node from v6.10.2 to v10.1.0 did the trick.

[bandersen22000]

I fixed the issue by converting the following .json files (tsconfig, angular-cli.json, tslint) to UTF8, without BOM.

[JigneshPatel04]

I have followed https://update.angular.io/ and
When I run 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.

Anyone know?

[Al-Sharif]

I was using visual studio code, i noticed the file encoding for angular-cli.json and package.json is UTF-8 and BOM, press on the label in the bottom then save with encoding and choose UTF-8. That's worked for me.

[JigneshPatel04]

My project tsconfig.json and tslint.json with UTF-8 and BOM so I choose UTF-8 and resolve it ago.
but thanks to reply .

[dmsysop]

Guys, I was having the same problem and managed to fix just leaving the tslint.json file as it was by default.

To avoid tslint "errors" I had commented on some of the lines that he understands as error, but that are not ... (whitespace true - for example)

Just correcting this, he did the update normally!

Hope this helps someone else.

Good luck !!

[neridonk]

You not only have to change tslint.json, you have to change also in folder "src" the tsconfigs , test.ts, . Any that is affected on this update

[bhaidar]

I am also facing a similar issue. I've detailed it here, if someone can have a look please.
#11825

[RicardoGomesRocha]

I my case I was getting the following error:

Unexpected token T in JSON at position 0 TF400813: Resource not available for anonymous access. Client authentication required.

The solution in my case could be found on this stackoverflow post

[xtrrdnryprgrmmr]

trying create a jhipster project with angular 6 .when i run "ng serve" command ,i took error in below.
please help me
Could not determine a single project for the 'serve' target.
Error: Could not determine a single project for the 'serve' target.
at ServeCommand.getProjectNamesByTarget (C:\Users\pc\complexdemo\node_modules@angular\cli\models\architect-command.js:184:19)
at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (C:\Users\pc\complexdemo\node_modules@angular\cli\models\architect-command.js:58:43)
at MergeMapSubscriber._tryNext (C:\Users\pc\complexdemo\node_modules\rxjs\internal\operators\mergeMap.js:122:27)
at MergeMapSubscriber._next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\operators\mergeMap.js:112:18)
at MergeMapSubscriber.Subscriber.next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\Subscriber.js:103:18)
at TapSubscriber._next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\operators\tap.js:109:26)
at TapSubscriber.Subscriber.next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\Subscriber.js:103:18)
at MergeMapSubscriber.notifyNext (C:\Users\pc\complexdemo\node_modules\rxjs\internal\operators\mergeMap.js:141:26)
at InnerSubscriber._next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\InnerSubscriber.js:30:21)
at InnerSubscriber.Subscriber.next (C:\Users\pc\complexdemo\node_modules\rxjs\internal\Subscriber.js:103:18)

[angular-automatic-lock-bot]

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