What is the Purpose of Angular.json ?

angular.json is the primary configuration file generated by the Angular CLI when you create a new project with ng new. It tells the CLI how to handle tasks like building, serving, testing, and more for your Angular application. Think of it as a blueprint that describes your project’s structure, assets, and build options.

Key Purposes of angular.json

• Defines Project Structure & Settings : Specifies the root directory, source files, and output path.
• Configures Build & Serve Options :Controls optimization, file replacements, and output format.
• Manages Assets & Styles : Lists stylesheets (CSS, SCSS), scripts (JS), and other assets.
• Sets Up Environments : Defines development and production configurations.
• Configures Test & Linting Rules : Specifies testing frameworks (Karma, Jasmine), linting rules, and reporters.

Angular.json Structure

{
  "version": 1,
  "projects": {
    "hello-world": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": { 
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/hello-world",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "port": 4200
          }
        }
      }
    }
  }
}

Important Sections of angular.json

Section	Purpose
version	Indicates Angular CLI configuration version.
projects	Contains project-specific configurations.
root	Defines the root directory of the project.
sourceRoot	Specifies the folder where src files exist.
architect	Contains build, serve, test, and lint configurations.
outputPath	Defines where the compiled files go (dist/).
assets	Lists static files like images and fonts.
styles	Includes global styles (CSS, SCSS).
scripts	Loads external JavaScript files.
serve	Configures the Angular development server (port, host).

Usages of angular.json?

1. Change the Default Port (4200 → 5000)

Modify the serve section:

"serve": {
  "options": {
    "port": 5000
  }
}

Run:

ng serve

Now, the app will be available at http://localhost:5000.

2. Add a Global SCSS File

Modify the styles section to use SCSS:

"styles": ["src/styles.scss"]

Now, Angular will compile SCSS automatically.

3. Add External JavaScript File (e.g., jQuery)

Modify the scripts section:

"scripts": ["src/assets/js/jquery.min.js"]

Angular will now include jQuery globally.

4. Customizing Build Outputs

You can tweak where your app is built and how it’s named:

json

"outputPath": "dist/my-custom-app"

Run ng build, and files land in dist/my-custom-app/ instead of the default.

5. Managing Multiple Environments

Define settings for development and production:

• Development: Keep source maps for debugging.
• Production: Enable minification and hashing for performance.

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all"
  },
  "development": {
    "optimization": false,
    "sourceMap": true
  }
}

Use it with: ng build –configuration=production.

6. Adding Assets

Ensure images, fonts, or other files are copied to the build:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {"glob": "**/*", "input": "src/custom", "output": "/custom"}
]

This copies the assets folder and a custom directory to the output.

7. Including Global Styles and Scripts

Add CSS or JavaScript files to your app:

"styles": ["src/styles.css", "src/theme.scss"],
"scripts": ["src/custom.js"]

These are bundled into the final build.

8. Supporting Multiple Projects

If your workspace has multiple apps or libraries:

"projects": {
  "app1": { /* config for app1 */ },
  "app2": { /* config for app2 */ }
}

Run ng build app1 or ng serve app2 to target specific projects.

Summary

• angular.json configures build, serve, assets, styles, and testing.
• You can modify it to change ports, add styles/scripts, or optimize builds.
• It helps customize Angular CLI behavior without modifying code.