Basic Structure Of An Angular Application

Project structure of an Angular application. What are the default folders/files available once we create an Angular application.

Many of us work or create new projects in Angular in our day-to-day lives. Most of us are not aware of what are the files and folders available once we create a new project. Also, what are their purpose and use them? In this blog, we will see the project structure of an Angular application.

This is the basic structure of every Angular project,

dist folder

The "dist" folder is the build folder that has all the files and folders which can be hosted in the server. It has the compiled code of our angular project including .js, .html and .css files.

e2e folder contains

1. "src" folder
   1. app.e2e-spec file
   2. app.po file
2. protractor.conf file
3. tsconfig file

This is the default configuration for the e2e folder created by the Angular CLI. e2e stands for end-to-end and it refers to e2e tests of the website. It is used to track user behavior on the website while testing.

node_modules folder

This folder is generated when we run "npm install" command. This folder contains third-party libraries and files. All these files are bundled in our project together. 

Note
We don't need this folder while deploying our application somewhere. 

"src" folder has this structure

app folder

Contains "modules" and "components" for our Angular application.

It basically has,

1. app.component.css - Contains the CSS code for the component.
2. app.component.html - HTML file pointing to the app component. It is a template for the angular application.
3. app.component.spec.ts - Unit testing file associated with app component. It can be generated using "ng test" command.
4. app.component.ts - Entire functional logic is written in this file. 
5. app.module.ts - TypeScript file holds all dependencies. Here we will use "NgModule" and define the Bootstrap component when loading the application.

assets folder

Here we will keep resources such as images, styles, icons, etc.

environments folder

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.