We know that whenever we create a new project in Angular, it generates a lot of files and folders. So, through this blog, I will explain the folder structure of Angular 5.
When we create an Angular project, our application's structure looks like this.
![]()
e2e
e2e stands for "end to end", this is the place where we can write the end to end test. The end to end test is basically an automated test that simulates a real user.
So, we can write code to launch our browser. Navigate to the home page of our application, then click a few links etc. are the example of end to end testing.
node_module
In this folder, you can find all the third party libraries on which the application may depend. This folder is purely for development.
src
This folder contains the actual source code for developers. This folder contains -
![]()
- app folder
Which contains all the “modules” and “components” of your application. Every application has at least one “module” and one “component”.
- assets folder
Where we can store static assets of our application for example images, icons etc.
- environment folder
Where we can store configuration settings for different environments. Basically, this folder contains two files,
- environment.prod.ts file for the production environment.
- Environment.ts file for the development environment.
favicon.ico is an icon file which displays on the browser.
index.html file contains our Angular application. Here, you can not find any reference to CSS or other JS files. All other pages are dynamically inserted into the page.
main.ts file 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);
pollyfills.ts 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 most 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 is where we can add global styles for our applications.
test.ts file is used for setting the testing environment
angular-cli.json is standard configuration file of your application
editorconfig file is used when you are working in a team environment. If you are working in a team environment then make sure that all developers of a team use the same setting in this file.
gitignore file is used for exporting files and folders to/from your git repository.
Karma.conf.js file is used to store the setting of Karma i.e. test cases.
package.json file is a standard file. Every node and Angular project contain this file. Basically, this file contains all information like name of the project, versions information, dependencies and dev-dependencies settings.
Example :- content of package.json file
![]()
tsconfig.json file has a bunch of settings for your TypeScript compiler, so your typescript compiler looks at the setting and based on these settings, compile your typescript code into javascript, so that browser can understand.
tslint.json file checks your TS code for readability, maintainability and functionality errors.