Folder and File structure of Angular Project

If you are new to Angular then visit my previous article, Click here.

First look at project you have created looks similar to this.

Lets go through project structure from top and first folder.

/e2e/

│───protractor.conf.js
│───tsconfig.json
│
└───src
     └───app.e2e-spec.ts
     └───app.po.ts 

e2e stands for End-To-End. This folder contains set of specific configuration tests corresponding to root level application. It is a root level folder and is at top of the project. It tests user behavior using script like who visited the website, navigates to another sites, signs in, logs out and fill forms.

protractor.conf.js configure test tool, tsconfig.json inherits and configure TypeScript from Workspace, and /src/ folder contains end-to-end tests for project.

/node_modules/

It manages npm packages to workspace and dependencies on /node_modules/ are visible to all over project and if you are using multiple the to all project. Third party libraries are installed in this folder. If you are deploying or committing int Git then you should not include this folder. Also if you are migrating project then do not include this folder rather run npm install command in new location.

/src/

│───favicon.ico
│───index.html
│───main.ts
│───polyfills.ts
│───styles.css
│───test.ts
│
├───app
│    └───app-routing.module.ts
│    └───app.component.css
│    └───app.component.html
│    └───app.component.spec.ts
│    └───app.component.ts
│    └───app.module.ts
│
├───assets
│
└───environments
      └───environment.prod.ts
      └───environment.ts

This folder contains our source code of the project:

• favicon.ico contains icon for this application that is in bookmark bar.
• index.html is the main page for your website. It does not contains references for any css file or js file as dependencies  are injected during building process. So you don’t need to add <script> or <link> tag.
• main.ts is our executing or starting point of our application. If you are familiar with JAVA or C or C# this is our main() function. And if you are not then just remember, it is the point from where our application start. It start bootstrapping application’s root module i.e. AppModule to run the browser.
• polyfills.ts is used for compiler to compile our TypeScript to JavaScript methods that can be used for different browsers.
• styles.css is the global stylesheet file that is included on project by default.  You can add global styles to this file, and also import other style files
• test.ts is the entry point of your unit testing and include some specific configuration of Angular. Normally edit in this file is not required.

/src/app/

This folder contains project logics and data i.e. modules and components. Files included in this folder are:

• app-routing.module.ts handles routing of the project.
• app.component.css defines the stylesheet for root AppComponent
• app.component.html defiles the HTML templates related with root AppComponent
• app.component.spec.ts defines the unit testing for root AppComponent
• app.component.ts defines the logic for root AppComponent. we also define properties, modules, etc.
• app.module.ts defines root modules called AppModule and it tells Angular about how to assemble application. In defaults AppComponent is declared and to use other component you need to declare it here.

src/assets/

This folder is empty at first. You can add assets like images, CSS files, JS files, etc here.

src/ environments

This folder contains two files for different environments. These file stores information’s related to environment specific like server addresses or database credentials. Two files in this folder are:

• environment.prod.ts stores information for production environment.
• environment.ts stores information for development environment.

.editorconfig

It stores configuration for various editor. As multiple people work on same project using different editors and IDEs. It stores file format for defining coding style and collection of text editor plugins.

.gitignore

This file instruct which file should be ignored while using git repository.

angular.json

This file contains CLI configuration defaults for all projects in workspace including configuration option for build, test tools and serve that are used by CLI, such as Protractor, Katma, and TSLint.

browserslist

This file contains configure for NodeJS version among various among front-end tools and sharing of targeted browsers.

karma.conf.js

This file contains karma configuration. For more about karma click here.

package-lock.json

This file contains version information of every packages installed in node_modules by npm client.

package.json

This is used in development environment only. It should be included for npm projects which contains information related to project like name, license, description, etc. commands are used for running project dependencies smoothly.

README.md

This files contations information of our project that need to be understood by user before start using this app.

tsconfig.app.json

This file contains the TypeScript configuration specific to our our application.

tsconfig.json

This file contains TypeScript configuration for project in the workshop. It also contains bunch of compilers setting.

tsconfig.spec.json

This file contains TypeScript configuration for application tests.

tslint.json

This contains configuration of static analysis tool that s used to check TypeScript code for maintainability, reliability, and functionality errors.

If you want to learn more about angluar then Click here.

Also Read:

• History of Angular

• How to use the bootstrap(ngx-bootstrap) 4 in angular 7?

• Angular 7: Create new project using Angular 7