Angular-cli: JSON Error when setting CSS Preprocessor on existing project

Created on 21 May 2018  路  6Comments  路  Source: angular/angular-cli

Versions

Angular CLI: 6.0.3
Node: 9.1.0
OS: darwin x64
Angular: 6.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@angular/pwa                      0.6.1
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

  • run ng config schematics.@schematics/angular:component.styleext scss

Observed behavior

Invalid JSON character: "s" at 0:0.
Error: Invalid JSON character: "s" at 0:0.
    at _readValue (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/json/parser.js:567:19)
    at parseJsonAst (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/json/parser.js:605:17)
    at Object.parseJson (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/json/parser.js:631:12)
    at normalizeValue (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/commands/config.js:128:19)
    at ConfigCommand.set (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/commands/config.js:195:23)
    at ConfigCommand.run (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/commands/config.js:168:18)
    at /Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/models/command-runner.js:278:30
    at Generator.next (<anonymous>)
    at fulfilled (/Users/hitchcocka/Projects/hostingDashboard/node_modules/@angular/cli/models/command-runner.js:4:58)
    at <anonymous>

Desired behavior


Should update app to use SCSS as CSS Preprocessor

Mention any other details that might be useful (optional)

I have tried resaving all .json files in my project as UFT8 (without BOM)

bufix

Most helpful comment

Fix it manually:

  1. Go to ${project folder}/node_modules/@schematics/angular/component/schema.json
  2. Edit styleext: Update "default": "scss"
    Hope that help and wait for official fix.

All 6 comments

The observed behavior is the same for me

Angular CLI: 6.0.3
Node: 8.11.2
OS: linux x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Fix it manually:

  1. Go to ${project folder}/node_modules/@schematics/angular/component/schema.json
  2. Edit styleext: Update "default": "scss"
    Hope that help and wait for official fix.

The way that I used the config command and worked was:
ng config -g schematics.@schematics/angular.component '{ styleext: "scss"}'

But there are another issue where the global styleext is not recognized by ng new or generate commands. #10135

This has been resolved in 6.0.7.

It seems the command should be in the following format.

ng config -g schematics..component "{ styleext: 'scss'}"

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gotschmarcel picture gotschmarcel  路  3Comments

JanStureNielsen picture JanStureNielsen  路  3Comments

hareeshav picture hareeshav  路  3Comments

sysmat picture sysmat  路  3Comments

5amfung picture 5amfung  路  3Comments