Angular.

json
Code :-
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Budget_house_": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
"@schematics/angular:pipe": {
"standalone": false
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
 "outputPath": "dist/budget-house",
"allowedCommonJsDependencies": ["lodash"],
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/environments"
],
"styles": [
"@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "6mb"
},
 {
"type": "anyComponentStyle",
"maximumWarning": "5mb",
"maximumError": "6mb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"buildTarget": "Budget_house_:build:production"
},
"development": {
"buildTarget": "Budget_house_:build:development"
 }
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "Budget_house_:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/environments"
],
"styles": [
"@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],
 "scripts": []
}
}
}
}
},
"cli": {
"analytics": "52b3c44b-5b9d-47ef-a86d-069f22588c2b"
}
}
Explanation :-
- The angular.json file is a configuration file used by the Angular CLI (Command Line Interface) to
define various settings and options for an Angular project. It provides a centralized location to
manage project configuration, including build settings, file paths, and third-party library
integrations.
- This file is generated automatically when you create a new Angular project using the Angular
CLI (Command Line Interface). It is a JSON file that contains various configuration settings for
your Angular project.
-The angular.json file includes settings related to project structure, build options, assets, styles,
scripts, and more.
-"projects": {
"Budget_house_": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
 "@schematics/angular:pipe": {
"standalone": false
}
},
explaination of this part :-
• This part of the angular.json file is under the "projects" key and defines the configuration for a
specific project named "Budget_house_".

• "Budget_house_": This is the name of the project being configured.

• "projectType": Specifies the type of project. In this case, it's set to "application", indicating that
the project is an Angular application.

• schematics": They are essentially code templates and generators that allow you to scaffold out
common parts of your Angular application, such as components, services, modules, directives,
and more.

• - When you use the Angular CLI to generate components, services, or other parts of your
application, you are actually using Angular schematics under the hood. Angular provides a
set of built-in schematics that you can use out of the box, and you can also create custom
schematics to meet your unique requirements.

• For example, when you run ng generate component my-component, the Angular CLI uses
the @schematics/angular:component schematic to generate the necessary files and code for
a new component in your project.

• "@schematics/angular:component": Configuration specific to generating Angular

components. The "standalone" property is set to false, indicating that components should
not be generated as standalone files. Instead, they may be included within modules.

• "@schematics/angular:directive": Configuration specific to generating Angular directives.

Similar to components, the "standalone" property is set to false, indicating that directives
should not be generated as standalone files.

• "@schematics/angular:pipe": Configuration specific to generating Angular pipes. Again, the

"standalone" property is set to false.

-"root": "",

"sourceRoot": "src",

"prefix": "app",

"architect": {

"build": {
"builder": "@angular-devkit/build-angular:application",

"options": {

"outputPath": "dist/budget-house",

"allowedCommonJsDependencies": ["lodash"],

"index": "src/index.html",

"browser": "src/main.ts",

"polyfills": [

"zone.js"

],

"tsConfig": "tsconfig.app.json",

"assets": [

"src/favicon.ico",

"src/assets",

"src/environments"

],

"styles": [

"@angular/material/prebuilt-themes/deeppurple-amber.css",

"src/styles.css"

],

"scripts": []

},

"configurations": {

"production": {

"budgets": [

"type": "initial",

"maximumWarning": "5mb",
 "maximumError": "6mb"

},

"type": "anyComponentStyle",

"maximumWarning": "5mb",

"maximumError": "6mb"

],

"outputHashing": "all"

},

"development": {

"optimization": false,

"extractLicenses": false,

"sourceMap": true

},

"defaultConfiguration": "production"

},

explaination of this part :-

• root: Specifies the root directory of the project. In this case, it's set to an empty string,
indicating that the project's root is the workspace root.
• sourceRoot: Indicates the directory where the source files for the project are located. In
this case, it's set to "src", meaning that source files like TypeScript code, HTML
templates, and stylesheets are located in the src directory.
• prefix: Specifies the prefix to be used for generated selectors (components, directives,
etc.). In Angular, it's a common practice to prefix selectors to avoid naming conflicts with
other libraries. Here, it's set to "app".
• architect: Contains configurations for different architectural aspects of the project, such
as building, serving, testing, etc.
• build: Configuration for building the project.
• builder: Specifies the builder to use for the build process. In this case, it's @angular-
devkit/build-angular:application, which is the builder for building Angular
applications.
• options: Contains various options for the build process:
• outputPath: This tells Angular where to put the files after it has built your project. In
this case, it's set to "dist/budget-house", so after the build, your project's files will be
stored in the dist/budget-house folder.
• allowedCommonJsDependencies: This specifies any third-party libraries that use
CommonJS modules and are allowed to be included in your project. Here, only
"lodash" is allowed, meaning that Angular will include any necessary parts of the
lodash library in your project's build.
• index: This points to the HTML file that serves as the entry point for your Angular
application. Typically, this file contains the <app-root> element where your Angular
components will be rendered.
• browser: This points to the TypeScript file that serves as the entry point for your
Angular application. It's where Angular starts bootstrapping your application.
• polyfills: These are additional JavaScript files that provide compatibility for features
that Angular needs but may not be available in all browsers. Here, "zone.js" is
included, which helps with asynchronous operations in your Angular application.
• tsConfig: This specifies the TypeScript configuration file that Angular will use when
compiling your TypeScript code.
• assets: These are static files like images, fonts, or JSON files that your application
may need. Here, "src/favicon.ico", "src/assets", and "src/environments" are specified
as asset paths.
• styles: These are CSS or SCSS files that will be included in your application. Here,
"@angular/material/prebuilt-themes/deeppurple-amber.css" provides styling from
Angular Material, and "src/styles.css" contains your project-specific styles.
• scripts: These are JavaScript files that will be included in your application. Here, it's
an empty array, meaning no additional scripts are included in the build.
• production:
• budgets: This specifies budgets for controlling the size of the generated files. It
defines thresholds for file sizes, and if those thresholds are exceeded, warnings or
errors are generated. In this case, there are two types of budgets defined:
• initial: This budget type applies to the initial size of the generated files.
• maximumWarning: Specifies the maximum size at which a warning will be issued.
Here, it's set to "5mb".
 • maximumError: Specifies the maximum size at which an error will be generated.
Here, it's set to "6mb".
• anyComponentStyle: This budget type applies to the size of any individual
component's styles.
• maximumWarning and maximumError: Similar to the initial budget, these define
thresholds for warning and error messages.
• outputHashing: This specifies the hashing algorithm used to generate unique
filenames for the output files. Here, it's set to "all", meaning that hashes will be
generated for all output files. This is often used for cache-busting purposes to ensure
that clients always load the latest version of the files.
• development:
• optimization: This controls whether optimization is enabled during the build process.
When optimization is enabled, Angular performs various optimizations such as dead
code elimination and minification to improve the performance of the application.
Here, it's set to false, meaning that optimization is disabled during development
builds.
• extractLicenses: This specifies whether licenses for third-party libraries are extracted
during the build process. When set to true, Angular extracts license information from
dependencies and adds it to the build output. Here, it's set to false, indicating that
licenses are not extracted during development builds.
• sourceMap: This controls whether source maps are generated during the build
process. Source maps provide a mapping between the original source code and the
compiled code, making it easier to debug the application in the browser's developer
tools. Here, it's set to true, meaning that source maps are generated for easier
debugging during development.

-"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"buildTarget": "Budget_house_:build:production"
 },
"development": {
"buildTarget": "Budget_house_:build:development"
}
},
"defaultConfiguration": "development"
},
explanation of code :-
• This section of the angular.json file is responsible for configuring the development server (ng
serve) for your Angular project.

• serve: Specifies the configuration for serving the Angular application.

• builder: Specifies the builder to use for serving the application. In this case, it's "@angular-
devkit/build-angular:dev-server", which is a builder provided by Angular for running a
development server.

• options: Contains additional options for serving the application.

• proxyConfig: Specifies the path to a proxy configuration file. This file (proxy.conf.json) can be
used to configure proxy settings for the development server, allowing you to proxy requests to
backend APIs during development to avoid CORS issues.

• configurations: Contains configurations for different environments (e.g., production and

development).

• production: Configuration for serving the application in a production environment.

• buildTarget: Specifies the target to use for building the application in production. In this case, it's
set to "Budget_house_:build:production", indicating that the production build configuration
defined earlier ("Budget_house_:build") should be used.

• development: Configuration for serving the application in a development environment.

• buildTarget: Specifies the target to use for building the application in development. Similarly, it's
set to "Budget_house_:build:development", indicating that the development build configuration
should be used.

• defaultConfiguration: Specifies the default configuration to use when serving the application.
Here, it's set to "development", meaning that when you run ng serve without specifying a
configuration, the development configuration will be used by default.

-"extract-i18n": {
 "builder": "@angular-devkit/build-angular:extract-i18n",

"options": {

"buildTarget": "Budget_house_:build"

},

explanation of code :-

• extract-i18n: This section specifies the configuration for extracting internationalization messages.

• builder: Specifies the builder to use for extracting i18n messages. In this case, it's "@angular-
devkit/build-angular:extract-i18n". This builder is responsible for extracting translatable
messages from the application's templates and TypeScript files.

• options: Contains options for the extraction process.

• buildTarget: Specifies the target to use for building the application before extracting i18n
messages. Here, it's set to "Budget_house_:build". This indicates that the build configuration
named "Budget_house_:build" should be used for building the application before extracting i18n
messages.

-"test": {

"builder": "@angular-devkit/build-angular:karma",

"options": {

"polyfills": [

"zone.js",

"zone.js/testing"

],

"tsConfig": "tsconfig.spec.json",

"assets": [

"src/favicon.ico",

"src/assets",

"src/environments"

],

"styles": [
 "@angular/material/prebuilt-themes/deeppurple-amber.css",

"src/styles.css"

],

"scripts": []

explanation of code :-

• This section of the angular.json file configures the testing setup for your Angular project using
Karma, a popular test runner for JavaScript.

• test: Specifies the configuration for running tests in the Angular project.

• builder: Specifies the builder to use for running tests. In this case, it's "@angular-devkit/build-
angular:karma". This builder is responsible for setting up and executing the tests using the Karma
test runner.

• options: Contains options for configuring the test setup.

• polyfills: Specifies polyfills needed for testing. Polyfills are additional scripts that provide
functionality not supported by all browsers. Here, "zone.js" and "zone.js/testing" are included.
These polyfills help with asynchronous operations and testing-specific functionality.

• tsConfig: Specifies the TypeScript configuration file to use for compiling the test files. In this case,
it's set to "tsconfig.spec.json", which is typically a specialized TypeScript configuration file for
testing.

• assets: Specifies static assets needed for testing. This can include files like images, fonts, or JSON
files. Here, "src/favicon.ico", "src/assets", and "src/environments" are specified as asset paths.

• styles: Specifies CSS or SCSS files needed for testing. Similar to the assets, these files are included
in the testing environment to ensure that the tests run in a similar environment to the
application itself. Here, "@angular/material/prebuilt-themes/deeppurple-amber.css" and
"src/styles.css" are specified.

• scripts: Specifies additional JavaScript files needed for testing. In this case, it's an empty array,
indicating that no additional scripts are included specifically for testing.

-"cli": {

"analytics": "52b3c44b-5b9d-47ef-a86d-069f22588c2b"

explanation of code :-
• analytics: Specifies an analytics identifier. This identifier is typically used for tracking Angular CLI
usage. It allows the Angular team to gather information about how developers are using the CLI,
which can help them improve the tool in future releases.

• By default, the Angular CLI sends anonymous usage data to the Angular team to help improve
the CLI's performance and user experience. This data may include information such as CLI
commands used, project configurations, and error messages encountered. However, this feature
can be disabled if desired, either during project creation or by modifying the angular.json file
directly.