Angular project and folder structure

 In this tutorial, will learn about angular project and folder structure. When you start to study angular tutorial, you should know about where you have to place your images, script, CSS and how to configure app resources in the configuration file. The Angular app structure is very clean and well architecture framework.we can set the rule of how your app should behave while compile and run.

dist:

Initially, this folder will not be displayed when creating a new application. This folder will be displayed when you build your application. All the build files will be deployed to the dist folder with the name of your application. You can change your build file location using angular.json config file. These are the file needs to be deployed on your server.

Node_modules:

This folder contains all of your dependency files like jquery, bootstrap and third party libraries.

E2e:

This folder contains a complete end to end testing files.

src:

This is our main folder contains all application code like Module, Component, Service and assets.

editorconfig:

editorconfig file contains all the setting of the editor (visual studio code).we can set like charset=utf8, space, Maxine length and etc.

gitignore:

This file contains git ignore setting When anyone clones your repository from git hub.

Angular.json:

This file contains all of your application setting like CSS,javascript path configuration.

You can configure your application build path(folder), favicon path using this config file.

Karma.config.js:

This file contains all the configuration of the testing plugin.

Package.json:

This file contains which dependency version needs to be installed when you install the Node Package Manager(npm).

Tsconfig.app.json:

This file contains a compile-time setting.

Tsconfig.json:

When you compile your application, what are the rule needs to be applied?