CODEWITHSUNDEEP
angular-cli
st_clair_clarke
st_clair_clarke

Reputation: 5715

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

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

Upvotes: 17

Views: 22858

Answers (4)

Shashank Vivek
Shashank Vivek

Reputation: 17504

Try

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

This removed .angular-cli.json and created angular.json.

If this leads to your project using 1.7.4, install v6 locally:

npm install --save-dev @angular/[email protected]

And try once again to update your project with:

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

Upvotes: 0

miff
miff

Reputation: 342

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"
            ]
          },
         ...

Upvotes: 4

May
May

Reputation: 250

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"
            ],

Upvotes: 1

user1477782
user1477782

Reputation:

I was having trouble adding bootstrap after updating. This is what finally worked for me. 



    "styles": [
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  {
                    "input": "src/styles.css"
                  }
                ],

Upvotes: 0

Related Questions