Angular - Configuration

This chapter will discuss the configuration of an Angular application, including important files, their specific role and usage in the Angular project, advantages, etc.

Angular Configuration

The Angular configuration is a set of instructions that defines how the Angular application is built and developed. It includes various information about the Angular application such as project files, tools, environments, and some other dependencies.

Important Configuration files in Angular

Here is a list of important configuration files that are automatically created when an Angular application is built using the Angular CLI. These files are important for running, deploying, and testing the application.

• angular.json
• package.json
• main.ts
• tsconfig.json

The angular.json Configuration File

In an Angular application, the angular.json file is a key configuration file that defines and manages all the settings for the Angular CLI (Command Line Interface). This file is necessary for customizing various aspects of your Angular project.

The angular.json file will look like:

 "projects": { "my-app": { "architect": { "build": { "options": { "outputPath": "dist/my-app", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } } } } } 

This file contains key aspects of your Angular project, such as the "application name", "index.html", "main.ts", "assets", "styles", "scripts", "environment configurations", "build" and "test" options, and other settings important for your Angular application’s build and deployment process.

Important Points of the angular.json File

Here are a few important aspects of the angular.json file that you should know:

• my-app: This is the name of your Angular project or application.
• index.html: The main HTML file that serves as the entry point for your application. It usually contains the "root" HTML element where the Angular app will be bootstrapped.
• main.ts: The main TypeScript file that acts as the entry point for the Angular application. It is responsible for bootstrapping the root module or component of the application.
• assets: A directory that contains static assets such as images, fonts, and other files that are needed by the application.
• styles: An array of global stylesheets that are included in the application. These stylesheets can be CSS or SCSS files and are applied to the entire application.
• scripts: An array of global scripts that are included in the application. These can be JavaScript files that need to be loaded before the Angular app starts.

The package.json Configuration File

In an Angular application, the package.json file serves as a fundamental part of managing the project's dependencies and scripts. It contains "metadata" about the project, including the project "name", "version", "scripts for starting', "building", "serving", and "watching the application", as well as the "dependencies" and "devDependencies".

The package.json file data will look like this:

 { "name": "my-crud-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "serve:ssr:my-crud-app": "node dist/my-crud-app/server/server.mjs" }, "private": true, "dependencies": { "@angular/animations": "^17.0.0", "@angular/common": "^17.0.0", "@angular/compiler": "^17.0.0", "@angular/core": "^17.0.0", "@angular/forms": "^17.0.0", "@angular/platform-browser": "^17.0.0", "@angular/platform-browser-dynamic": "^17.0.0", "@angular/platform-server": "^17.0.0", "@angular/router": "^17.0.0", "@angular/ssr": "^17.0.8", "express": "^4.18.2", "json-server": "^1.0.0-beta.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "^17.0.8", "@angular/cli": "^17.0.8", "@angular/compiler-cli": "^17.0.0", "@types/express": "^4.17.17", "@types/jasmine": "~5.1.0", "@types/node": "^18.18.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.2.2" } } 

Important Points of the package.json File

Here are a few important aspects of the package.json file that you should know:

• name & version: The name and the version of your application, which is useful for identifying, and tracking updates and dependencies.
• scripts: It contains commands for common tasks such as "building", "serving", and "testing" the Angular project. These commands are executed using npm run <command>
• dependencies: It is a list of Angular packages and other libraries your project depends on. These are important for the application to run and are installed when you run the npm install command.
• devDependencies:  It is a list of packages that are needed only for "development purposes", such as "testing tools" and "build tools".

The main.ts Configuration File

In an Angular application, the main.ts file serves as the entry point. It is responsible for "bootstrapping" the root module or component. When you run the ng serve command, it compiles the application and looks for the "main.ts" file first to initiate the "bootstrapping process".

If the main.ts file is missing or has issues, your application will fail to start, and you will face errors.

The main.ts file data will look like this:

 import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); 

Here,

• AppComponent: It is the main component that acts as the root component of your application.

The tsconfig.json Configuration File

A given Angular workspace contains several TypeScript configuration files. At the root tsconfig.json file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.

Initially, the tsconfig.json file data will look like this:

 { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [ "node" ] }, "files": [ "src/main.ts", "src/main.server.ts", "server.ts" ], "include": [ "src/**/*.d.ts" ] } 

Conclusion

In conclusion, Angular configuration plays an important role in ensuring that your Angular application runs smoothly without any lag or errors. It involves setting up various aspects of the application, such as "environment settings", "build configurations", "module imports", etc.