Folder Structure of Angular Application

node_module folder:-

• In this folder, there are third party libraries on which the application may depend.
• This folder is purely for Development.
• This folder has the highest size among all the folder created and this is one of the main folder in angular Project.

editorconfig file:-

• This file is used when we are working in a team environment.
• If we are working in a team environment then make sure that all developers of a team use the same settings in this file.

gitignore file:-

• This file is used for exporting files and folders to/from your git repository.

karma.conf.js:-

• This file is used to store settings of Karma. ie.test cases.

package.json file:-

• This file is a standard file.
• Every node and angular project contain this file.
• Basically, this file contains all information like name of project, versions information, dependencies and dev-dependencies setting.

src folder:-

• This folder contains the actual source code for developers.

app folder:-

• This folder is a part of src folder.
• Which contains all the “modules” and “components” of our application.
• Every application has at least one “module” and one “ component”.

assets folder:-

• Where you can store static asset of our application for example images, icons, etc.

environment folder:-

• Where we can store configuration setting for different environments.
• Basically, this folder contains two files,
• 1) environment.prod.ts file for the Production Environment.
• 2) environment.ts file for development environment.

favicon.ico file:-

• It is an icon file which displays on Browser.

index.html file:-

• This file contains our Agular Application.
• Here, we cannot find any reference to CSS or other JS files.
• All other pages are dynamically inserted into the page.

main.ts file:-

• It is a typescript file.
• It is the starting point of our Application.
• Here, we can bootstrap (the process of initializing or loading) our main module using bootstrapModule method like, platformBrowserDynamic().bootstrapModule(AppModule);

polyfills.ts file:-

• This file basically imports scripts required for running Angular because angular framework uses the features of javascript which are not available in the current version of javascript supported by the browser.
• So basically, it fills the gap to give the features of javascript that are needed by Angular and the feature supported by the current browser.
• Polyfills files can be divided into two parts.
• Browser polyfills these are applied before loading zone.js and are sorted by the browser.
• Application imports files imported after zone.js file, they should be loaded before your main file.

style.css file:-

• It is a file where we can add global styles for our application.

test.ts file:-

• This file is used for setting the testing environment.

angular-cli.json file:-

• It is standard configuration file of our application.