Directory structure of Angular Project.

Once you create a new project using @angular-cli. Following is the default directory structure.

Directory Structure

Let’s go one by one and see what the purpose of each file and folder is

1. e2e (end-to-end) - This is the folder which contains test cases for testing the complete application along with its specific configuration files.
2. node_modules - It contains all the node-modules used in the angular application. This folder contains libraries downloaded from npm.
3. .editorconfig - This file is used for defining consistent configuration.
4. .gitignore - This file is related to the source control git.
5. angular.json - This is very important configuration file related to your angular application. It includes configuration of build, serve, test, lint, e2e commands which are used by @angular-cli.
6. browserslist - The browserslist is a config file in which you can define your target browsers. It is not something Angular- specific but a standard across many front end related tools
7. karma.config.js - This specifies configuration for karma, which is used for testing angular applications.
8. package.lock.json - It is automatically generated for any operations where npm modifies either the node-modules tree , or package.json.
9. package.json - This is npm configuration file. It includes details about your website’s package dependencies.
10. README.md - This is the introductory documentation for the root app.
11. tsconfig.app.json - This is used to override the tsconfig.json file with app specific configuration.
12. tsconfig.json - This defines configuration of TypeScript in project.
13. tsconfig.spec.json - This overrides the tsconfig.json file with the app specific unit test configuration.
14. tslint.json - This defines TSLint configuration for project. TSLint is an extensible static analysis tool for TypeScript.
15. src - This is the folder which contains the main code files related to your angular application.

• app - This folder contains the files , you have created for app components.
• assets - This folder contains all the images or resources used in the application.
• environments - This folder is used to hold the environment configuration constants that help when building the angular application.
• favicon.icon - This file specifies a small icon that appears next to the browser tab of a web site.
• index.html - The main HTML page that is served when someone opens your website or application.
• main.ts - The main entry point for your application. This file starts the AppModule from app.module.ts and it can be used to define global configurations.
• polyfills.ts - This file is a set of code that can be used to provide compatibility support for older browsers.
• styles.css - This is a global CSS file which is used by the angular application.
• test.ts - This is the main test file. You don’t typically need to edit this fil

Files in App Folder

• app-routing.module.ts - This imports RouterModule and Routes so the app can have routingfunctionality.
• app.component.css - This file contains all the CSS styles for the app component.
• app.component.html - This file contains the html file related to app component. This is the template file which is used by angular to do the data binding.
• app.component.spec.ts - It contains your unit tests for the app component.
• app.component.ts - This contains all the code used by the component to control its behavior.
• app.module.ts - This is also a typescript file which includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.