Basic Structure Of An Angular Application

It contains the environment configuration constants that help while building the angular application. It has environment.ts and environment.prod.ts. These configurations are used in angular.json file.

favicon.io

The icon appears in the browser tab of our application.

index.html

Basic HTML file.

main.ts

The starting point of our application. It bootstraps/starts the AppModule from the app.module.ts file.

polyfills.ts

This file is used to compile our TypeScript to specific JavaScript methods. Provides compatibility support for Browser versions.

styles.css

Global CSS file.

tests.ts

It is the main test file. When we run the "ng test" command, this file is taken into consideration.

.browserslistrc file

Browser compatibility and versions are mentioned in this file. This configuration is pointed to in our package.json file.

.editorconfig

This file deals with consistency in code editors to organize some basics such as indentation and whitespaces. More like code formatting.

angular.json

This file defines the structure of our application. It includes settings associated with our application. Also, we can specify the environments on this file. For example, development, production, etc.

karma.conf.js

This is the configuration file for the Karma Test Runner. It is used in Unit Testing.

package.json

This is the npm configuration file. All the dependencies mentioned in this file. We can modify dependency versions as per our need on this file.

package-lock.json

Whenever we change something on the node_modules or package.json, this file will be generated. It is associated with npm.

README.md

This file is created by default. It contains our project description. It shows how to build and which Angular CLI version has been used.

tsconfig.app.json

This configuration file overrides the tsconfig.json file with relevant app-specific configurations.

tsconfig.base.json

This file has been introduced in Angular 10+. It has the same configuration as compared to tsconfig.json file.

tsconfig.json

TypeScript compiler configuration file. This is responsible for compiling TypeScript to JavaScript so that the browser will understand.

tsconfig.spec.json

This file overrides the tsconfig.json file with app-specific unit test configurations while running the "ng test" command.

tslint.json

tslint.json is a static analysis tool. This file keeps track of the TypeScript code for readability, maintainability, and functionality errors.

Summary

In this blog, we have learned the file and folder structure of an Angular application. Each file/folder has its own role. Thank you.