Folder Structure of Angular Applications

Today, we are discussing another angular topic which is the folder structure of the angular application.

I hope you read my earlier post is the fundamental concepts of angular.

When we create a new angular application then we can see many files in the new application. So today we are all the files of this application one by one. 

e2e - e2e stands for "end to end", this is the place where we can write the end to end test.

node_modules - In this, you can find all the library and packages which are used in the app.

src - This file is very important for development purposes. we are mostly working with this file. this file contains many file like components, assets, environment.

• app folder
  Which contains all the “modules” and “components” of your angular application. Every application has at least one “module” and one “component”.
  
• assets folder
  In the asset folder, we can store static assets of our application for example images, icons, and so many things.
  
• environment folder
  In the environment, we can store configuration settings for different environments. Basically, this folder contains two files: (1)environment.prod.ts - this file for the production environment.(2)Environment.ts - this file for the development environment.

favicon.ico - This is an icon file that displays on the browser tab.

index.html - This is only one index file in the angular project. all the component's view dynamically renders with this file. 

main.ts- This file is a TypeScript file. It is the starting point of angular application. here we can execute bootstrap to our main module.

pollyfills.ts -  this file imports all scripts required for running an Angular app.

style.css - This file is used for writing global CSS for the angular app.

test.ts - this file is used for setting the testing environment in our app.

angular-cli.json -  This file contains the standard configuration file of your application

editor config -  this file is used when you are working in a team environment. So make sure all the programmers have the same configuration.

gitignore - this file is used for exporting files and folders to/from your git repository.

Karma.conf.js - This file is used for test cases for the app.

Pacakge.json - this file contains all packages, dependencies, dev dependencies, name of the project, etc.

tsconfig.json - this file has a bunch of settings for your TypeScript compiler, so your typescript compiler looks at the setting and based on these settings, compiles your typescript code into javascript, so that browser can understand.

tslint.json -this file checks your typescript code for readability, maintainability, and functionality errors.