Angular CLI − ng config Command

Previous
Quiz
Next

This chapter will discuss the Angular CLI ng config command, including its syntax, arguments, options, and provide a working example, which give a clear understanding of how to use this command in a real-world Angular project.

The 'ng config' Command

The Angular CLI provides a command called "ng config", where "config" stands for "configuration". It allows you to retrieve or set configuration values within the angular.json file, either directly or through the command line, enabling customization of your Angular projects.

The main purpose of this command is to manage the configuration of your Angular workspace, which is defined in the angular.json file.

Syntax

Following is the syntax of the Angular CLI ng config command −

ng config ng[json-path][value] [options]

Here,

  • jsonPath: This is the configuration key that you want to set or query.
  • value: This is the new value that you want to assign to the specified configuration key.
  • options: These are the optional flags (options) that modify the behavior of the command.

Arguments

The arguments for ng config command is as follows −

Sr.No. Argument & Description
1 <jsonPath>

The configuration key to set or query, in JSON path format. For example: "a[3].foo.bar[2]". If no new value is provided, returns the current value of this key.
2 <value>

If provided, a new value for the given configuration key.

Options

Options are optional parameters. A few commonly used options are listed below:

Sr.No. Option & Description
1 --global=true|false

When true, accesses the global configuration in the caller's home directory.

Default: false

Aliases: -g

 2 --help=true|false|json|JSON

Shows a help message for this command in the console.

Default: false

Example

Following is an example of the ng config command. If you run this command for the very first time in your Angular project, it might prompt you with the following confirmation instructions to proceed with:

Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.dev/cli/analytics.

   (y/N)

To proceed further, simply enter y and press Enter. The configuration code will be displayed after you press Enter:

Global setting: enabled
Local setting: enabled
Effective status: enabled
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myApp": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "myApp:build:production"
            },
            "development": {
              "buildTarget": "myApp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "c4d137d1-abd1-4812-9d83-ff7cf9822002"
  }
}

As you can see that the default code above represents the configuration file content, such as the angular.json file.

Print Page
Previous
Next
Advertisements