Explanation of and structure of new angular.json file (angular-cli 6.x)

Question

The new angular.json file in angular 6.x, has, as part of its structure the following

"styles": [{
  "input": "src/styles.scss"
}],
"scripts": []
},

My current angular/cli v1.72 has the equivalent in the .angular-cli.json

"styles": [
  "../scss/bootstrap/bootstrap.scss",
  "../src/assets/styles/icon8.css",
  "styles.scss",
  "styles-props.css"
],
"scripts": [
  "../node_modules/web-animations-js/web-animations.min.js",
  "../node_modules/jquery/dist/jquery.js",
],

How can I convert the v1.7.2 to v 6.x format? What does the 'input' in the new format represents?

Cheers

Answer 1

am using clarity seed, here my converted (ng update @angular/cli) angular.json, maybe this will help you.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "clarity-seed": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.json",
            "assets": [
              "src/images",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/@clr/icons/clr-icons.min.css",
              "node_modules/@clr/ui/clr-ui.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/core-js/client/shim.min.js",
              "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
              "node_modules/@clr/icons/clr-icons.min.js",
              "node_modules/web-animations-js/web-animations.min.js"
            ]
          },
         ...

Answer 2

i think they changed the root directory that the config values refer too. eg.

in the old .angular-cli.json , it seems that src folder was the point of reference

"styles": [
        "./styles/styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "./styles/app.css",
        "./styles/home.css",
        "./styles/navbar.css"      
      ],

in the NEW angular.json, the point of reference is one lever above the src folder... where you have your package.json etc.

"styles": [
              "src/styles/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles/app.css",
              "src/styles/home.css",
              "src/styles/navbar.css"
            ],