Angular Folder Structure in Visual Studio 2019

 

In visual studio Angular Front End contains under the ClientApp folder.

   e2e folder

   (E2E)  means end to end testing and also known as integration testing provides a

   automatic simulation  by which we can make sure that our application works correctly

   and components are communicating with each other accordingly and producing 

   the desired functionality.

In Angular protractor is a framework which provides power full testing tools and technologies protractor.conf.js file provide configuration setting for the protractor framework.

src folder

This folder contains all the main code files which we will create and work around in our Angular project.  

app folder 

When we create Angular project, the default app module will be automatically created. 

Every Angular application must contains at least one module and one component. 

  

Inside app folder we can see that there are few folders includes counter, fetch-data, 

home,  nav-menu which are components of our app. Inside components we define our application logic and data.

As we can see that each component has its own HTML and TypeScript file and also counter component has specification file which provides unit testing for the component. When we create component in Angular .css file also created in which we can define style for the component it is an optional choice as we can see it in our nav-menu component.

app.component.html this file contains the HTML code it is a template file used to bind the data for Angular.

app.component.ts this is a typescript file provide logic to our component.

app.module.ts this is also a typescript file it contains all the dependencies for our  app we will import needed module for our app here and also declare component to be use in the app.

Some other important files in the Angular Project Folder.

          package.json

 It is the npm configuration file. It contains information of packages and  dependencies installed in our web application.

         package-lock.json

This file automatically generate the information when npm package manager runs, this file store the npm operation.

angular.json

 This file contains information related to workspace configuration and project specific configuration and provides default setting for the build and development tools provided by Angular CLI.

.gitignore

 this file stores the information related to Git operation and tells the Git which files to ignore.

.editorconfig

 This files maintains the consistency related to code editor operation.

Assets folder

This folder contains those files which are not modify during compilation such as images.

Environment folder

contains files which provide default environment for the configuration.

Browser list

In this file you can define your target web browser.

favicon.ico

It is a small graphic image file which represent your website brand in the web browsers.

Index.html

when some one visits your website this files serves first.

main.ts

 It is the main entry point and it is .ts file it will start the JIT compiler and compiles your application.

polyfills.ts

This file contains polyfill scripts to support the web browsers.

test.ts

It is the main unit test file in your project.

styles.css

It is a Global CSS file which provide style support for  your application.

tsconfig.json

This file specifies the configuration options for the TypeScript compiler.




tslint.json


This file provide configuration information for the TSLint for the current project.

Here is a YouTube video Link of my Angular Dot Net Core Folder Structure tutorial (Urdu/Hindi language)

Written By

Syed Sohail Ahmed Quadri

YouTube Channel

Right Way Learning