Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt

Use this file to discover all available pages before exploring further.

Angular build configurations are named overrides defined inside angular.json that let you swap groups of build options with a single --configuration flag. Siget ships with two configurations — production and development — and defaults to production so that a plain ng build always produces an optimised, deployment-ready bundle.

Configurations in angular.json

The full configurations block for the build architect target reads:
"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"
The defaultConfiguration is set to "production", which means ng build (and npm run build) always runs a fully optimised production build unless you explicitly pass a different --configuration flag.

Switching Configurations

Pass the --configuration flag to the Angular CLI to select a named configuration explicitly:
# Explicit production build (same as the default)
ng build --configuration production

# Development build — no optimisation, source maps enabled
ng build --configuration development

# Serve the application using the production build target
ng serve --configuration production
The serve architect target also maps each configuration name to its corresponding build target:
"serve": {
  "builder": "@angular/build:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "siget:build:production"
    },
    "development": {
      "buildTarget": "siget:build:development"
    }
  },
  "defaultConfiguration": "development"
}
ng serve defaults to development, giving you source maps and unminified output while the dev server is running.

Environment-Specific Settings

The table below summarises how each option differs between the two built-in configurations. Settings marked default are implied by the builder when no explicit value is provided in the configuration block.
Settingdevelopmentproduction
optimizationfalsetrue (default)
sourceMaptruefalse (default)
extractLicensesfalsetrue (default)
outputHashingnone (default)all
  • optimization — Enables tree-shaking, minification, and dead-code elimination for the final bundle.
  • sourceMap — Emits .map files so browser DevTools can show original TypeScript source in stack traces and the debugger.
  • extractLicenses — Writes a 3rdpartylicenses.txt file to dist/ listing open-source licence texts for all bundled dependencies.
  • outputHashing — Appends a content-based hash to emitted filenames. Setting this to all in production enables permanent browser caching for every asset.

Assets Configuration

The public/ directory at the repository root is configured as the assets source:
"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
]
Everything inside public/ — favicons, robots.txt, static images, manifest.json, and any other static files — is copied verbatim into the root of dist/siget/browser/ without transformation. No import is required; these files are always available at the root URL of the deployed application.

Global Styles

src/styles.scss is the single global stylesheet entry point:
"styles": [
  "src/styles.scss"
]
Styles declared in this file are compiled and injected globally — they are not scoped to any component. Use it for CSS resets, design token variables, and typography rules that must apply across the whole application:
// src/styles.scss

// Design tokens
:root {
  --color-primary: #6200ea;
  --color-surface: #ffffff;
  --font-body: "Inter", sans-serif;
}

// Global reset
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
}

Inline Style Language

SCSS is configured as the default inline style language for all generated components:
"inlineStyleLanguage": "scss"
This means component styles written directly in the styles metadata property — rather than in an external .scss file — are also processed through the SCSS compiler. It also drives the Angular CLI schematic default, so ng generate component produces .scss files automatically:
"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
You can add custom named configurations for additional environments such as staging or uat without touching existing configurations. Define the new configuration inside the configurations block in angular.json, explicitly listing every option the build should apply:
"staging": {
  "budgets": [
    { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
    { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
  ],
  "outputHashing": "all",
  "sourceMap": true
}
Then build for staging with:
ng build --configuration staging

Build docs developers (and LLMs) love