angular.json: Angular Workspace Configuration Reference

angular.json is the Angular CLI workspace configuration file. It defines every build, serve, and test target the CLI can execute for the project, including all configuration variants (production, development) and the schematics defaults that control how code-generation commands behave.

Top-Level Structure

The file follows Angular workspace schema version 1 and declares a single project — siget.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "packageManager": "npm"
  },
  "newProjectRoot": "projects",
  "projects": { ... }
}

Field	Value	Description
`version`	`1`	Angular workspace config schema version
`cli.packageManager`	`npm`	Package manager used by the Angular CLI
`newProjectRoot`	`projects`	Directory where `ng generate application` places new projects

Projects Section

The workspace contains one project, siget, configured as a standalone application.

"siget": {
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app"
}

Field	Value	Description
`projectType`	`application`	Marks this as a deployable application (not a library)
`root`	`""`	Project root is the workspace root itself
`sourceRoot`	`src`	All application source files live under `src/`
`prefix`	`app`	Default selector prefix for generated components (e.g. `app-root`)

Architect Targets

Each target is invoked by the Angular CLI — for example ng build, ng serve, and ng test. The three targets configured in Siget are expanded below.

build — @angular/build:application

The build target compiles the application using the modern @angular/build:application builder (esbuild-based).Base options:

"options": {
  "browser": "src/main.ts",
  "tsConfig": "tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "assets": [
    {
      "glob": "**/*",
      "input": "public"
    }
  ],
  "styles": [
    "src/styles.scss"
  ]
}

Option	Value	Description
`browser`	`src/main.ts`	Application entry point
`tsConfig`	`tsconfig.app.json`	TypeScript config used during compilation
`inlineStyleLanguage`	`scss`	Component `styles` arrays are treated as SCSS
`assets`	`public/*/`	Everything in `public/` is copied to the output root
`styles`	`src/styles.scss`	Global stylesheet included in every page

Production configuration:

"production": {
  "budgets": [
    { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
    { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
  ],
  "outputHashing": "all"
}

Budget type	Warning threshold	Error threshold
`initial`	500 kB	1 MB
`anyComponentStyle`	4 kB	8 kB

outputHashing: "all" appends a content hash to every emitted asset filename, enabling long-lived HTTP cache headers.Development configuration:

"development": {
  "optimization": false,
  "extractLicenses": false,
  "sourceMap": true
}

Option	Value	Description
`optimization`	`false`	Skips minification and tree-shaking for faster builds
`extractLicenses`	`false`	Does not write a separate `3rdpartylicenses.txt` file
`sourceMap`	`true`	Emits source maps for in-browser debugging

defaultConfiguration is set to "production", so a plain ng build always runs the production configuration. Pass --configuration development (or use ng build --watch) to opt into the development configuration.

You can add a staging configuration that inherits production settings but overrides specific values — for example a different baseHref or API URL. Extend configurations with a "staging" key and reference it with ng build --configuration staging.

serve — @angular/build:dev-server

The serve target starts the local development server. It delegates the actual compilation to the build target and simply wires up the correct buildTarget per configuration.

"serve": {
  "builder": "@angular/build:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "siget:build:production"
    },
    "development": {
      "buildTarget": "siget:build:development"
    }
  },
  "defaultConfiguration": "development"
}

Running ng serve uses development by default, so changes are reflected quickly with source maps enabled. Use ng serve --configuration production to test a production build locally.

test — @angular/build:unit-test

The test target runs the project’s unit test suite.

"test": {
  "builder": "@angular/build:unit-test"
}

Siget uses Vitest as its test runner (declared in package.json devDependencies). The @angular/build:unit-test builder integrates with Vitest and reads tsconfig.spec.json for test compilation settings.Run the suite with:

ng test
# or
npm test

Schematics

Schematics control the defaults applied when you use ng generate. Siget sets SCSS as the default component style so every generated component uses .scss instead of the Angular default .css.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}

This means ng generate component my-feature automatically creates my-feature.component.scss without requiring the --style scss flag each time.

CLI Commands

Configuration

angular.json: Angular Workspace Configuration Reference

Top-Level Structure

Projects Section

Architect Targets

Schematics

Build docs developers (and LLMs) love

CLI Commands

Configuration

Documentation Index

​Top-Level Structure

​Projects Section

​Architect Targets

​Schematics

Build docs developers (and LLMs) love

Top-Level Structure

Projects Section

Architect Targets

Schematics