Scribd
Upload
11 views

AngularJson File Exploring

The angular.json file is a crucial configuration file for Angular projects, detailing how the project is built, served, and tested. It includes sections for project settings, build configurations, and development server settings, allowing for customization based on project needs. Key components include project type, source paths, build options, and configurations for production and development environments.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

AngularJson File Exploring

The angular.json file is a crucial configuration file for Angular projects, detailing how the project is built, served, and tested. It includes sections for project settings, build configurations, and development server settings, allowing for customization based on project needs. Key components include project type, source paths, build options, and configurations for production and development environments.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Exploring Angular.

json File
In Angular 18

Sai Reddy 2/15/25 Angular 18


Exploring Angular.json File
The angular.json file is a configuration file that defines how an Angular project is built, served, and
tested. Let's break it down section by section to understand why each part is important.
1. "$schema"
"$schema": "./node_modules/@angular/cli/lib/config/schema.json"
❖ Specifies the JSON schema file that defines the structure of angular.json.
❖ Helps with auto-completion and validation in editors like VS Code.

2. "version"
"version": 1
❖ Represents the Angular CLI version that generated this file.

3. "newProjectRoot"
"newProjectRoot": "projects"
❖ When you create a new project inside this workspace, it will be placed in the "projects"
folder.

4. "projects"
Defines configuration settings for each Angular project within the workspace.
In this case, there's only one project: SaiReddyChatApp.
"projects": {
"SaiReddyChatApp": {
• The project name "SaiReddyChatApp" is used in CLI commands like ng build
SaiReddyChatApp.

5. "projectType"
"projectType": "application"
• Specifies whether this is an application or library.
• Applications are runnable, whereas libraries are reusable code.

6. "root" and "sourceRoot"


"root": "",
"sourceRoot": "src"
• "root": Project’s root directory (empty means it’s in the main folder).
• "sourceRoot": The main folder where the source code is located (src/).

7. "prefix"
"prefix": "app"
• Used as a prefix for component selectors (e.g., <app-component>).
• Can be changed based on project needs.

Sai Reddy
saireddy-dotnetfs
Architect Section (Defines build, serve, test configurations)
8. . "build" → Defines how the app is built
"build": {
"builder": "@angular-devkit/build-angular:application",
• Specifies that the Angular DevKit will be used to build the app.

"options" → Build settings


"outputPath": "dist/sai-reddy-chat-app",
• Defines where the build output will be stored (dist/ folder).
"index": "src/index.html",
"browser": "src/main.ts",
• "index": The HTML entry point.
• "browser": The TypeScript entry point (main.ts).
"polyfills": ["zone.js"],
• Polyfills are scripts required for Angular to work in different browsers.
"tsConfig": "tsconfig.app.json",
• TypeScript configuration file for the app.
"assets" → Static files
"assets": [
{
"glob": "**/*",
"input": "public"
}
]
• All files in the public/ folder will be copied to the dist/ folder during the build.
"styles" → Global styles
"styles": [
"@angular/material/prebuilt-themes/azure-blue.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
• Loads the Material theme, Bootstrap, and custom styles globally.
"scripts" → Global scripts
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
• Loads Bootstrap’s JavaScript for components like modals.

Sai Reddy
saireddy-dotnetfs
9. "configurations" → Build Profiles
Defines different build environments.
"production" → Optimized for deployment
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kB",
"maximumError": "4kB"
}
],
• Performance budget warnings for large files.
"outputHashing": "all"
• Enables cache-busting by appending hashes to filenames.
"development" → For local development
"optimization": false,
"extractLicenses": false,
"sourceMap": true
• Optimization disabled for faster rebuilds.
• Source maps enabled for debugging.
10. "serve" → Development Server Settings
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
• Runs ng serve to start a local development server.
"configurations"
"production": {
"buildTarget": "SaiReddyChatApp:build:production"
},
"development": {
"buildTarget": "SaiReddyChatApp:build:development"
}
• Specifies which build configuration should be used when running ng serve --
configuration=production.
"defaultConfiguration": "development"
• Default mode is development when running ng serve.
11. "extract-i18n" → Internationalization Extraction
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
}
• Extracts translations for multi-language support.

Sai Reddy
saireddy-dotnetfs
12. "test" → Unit Testing Configuration
"test": {
"builder": "@angular-devkit/build-angular:karma",
• Uses Karma as the test runner.
"polyfills": [
"zone.js",
"zone.js/testing"
],
• Polyfills required for running tests.
"tsConfig": "tsconfig.spec.json",
• Uses tsconfig.spec.json for TypeScript settings in tests.
"assets": [
{
"glob": "**/*",
"input": "public"
}
]
• Includes static files in test runs.
"styles": [
"@angular/material/prebuilt-themes/azure-blue.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
• Loads global styles and Bootstrap scripts for tests.

13. Other Settings


"cli" → Angular CLI Analytics
"cli": {
"analytics": "36fb0cfd-35b9-41d7-b244-966a593f68f0"
}
• Tracks Angular CLI usage (can be disabled using ng analytics off).

Sai Reddy
saireddy-dotnetfs

You might also like