Understanding angular application folder structure

Background

In the last post, we saw how to write a simple "Hello World!" application -

• Angular Hello World example 

In this post, I will try to explain the directory structure and importance of various files and folders in the angular project that we generated.


NOTE: This is for angular 7. Folder structure and file names might be different in previous versions of angular.

 Understanding the angular application folder structure

 If you see the previous post the directory structure generated was as follows -

We go try to see all the files and folders in the above picture and see what each does.

e2e

e2e stands for end to end. This consists of your end to end integration tests. these tests are run as if it is a real user testing but are actually simulated one. This includes opening a browser, navigating to the page, clicking on UI elements etc.

This uses a package called protractor. You can find more details about protractor in https://www.protractortest.org/#/.

node_modules

If you are familiar with node environment this requires no special introduction. Angular app is essentially a node package. You can see there is a file called package.json in the root folder of your generated application. It defines dependencies of your node package. So that when you run "npm install" these dependencies are installed. These dependencies go under a folder called "node_modules" which is in the same folder as package.json. 

src/app

This folder is the source folder of your angular application. It contains all the source code that you write for your angular app to render. This will have files corresponding to your module, components, templates, css/saas files etc. The angular app will have at least one module and component.

src/assets

 As the name suggests this folder should store all your static assets like images, icons etc.

src/enviroments

This folder contains the configuration for environments you define. By default, it would have 2 environments -

1. environment.prod.ts : For production environment
2. environment.ts  : For development environment

favicon.ico

This is the icon that gets showed when your browser loads your page.

index.html

This is the main HTML file that loads. You can see it has tag -

• <app-root></app-root>

This tag corresponds to the selector of bootstrap component(app.component.ts) that is defined in your root module(app.module.ts).

main.ts

This is our main type script file. Here we can bootstrap our module as -

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
 

polyfills.ts

This type script file contains scripts that are needed by angular since the javascript feature may not be available in the browser. So basically it fills the gap to provide the features of JavaScript that are needed by Angular application and the features supported by your current browser.

For example, IE may not support a File or a blob object. In this file, you can add your custom definitions.

style.css

This file contains your common styles that are global to the application. It could be a css or a saas file depending on what you choose during creation of your angular application.

karma.conf.js

This file is used to store the setting of Karma. Karma is used for unit tests while protractor that we saw above is used for end to end tests. For details see https://karma-runner.github.io/latest/index.html

NOTE: Karma is a great tool for unit testing, and Protractor is intended for end to end or integration testing. This means that small tests for the logic of your individual controllers, directives, and services should be run using Karma. Big tests in which you have a running instance of your entire application should be run using Protractor. Protractor is intended to run tests from a user's point of view - if your test could be written down as instructions for a human interacting with your application, it should be an end to end test written with Protractor.

test.ts

This file is required for doing the testing setup.  This file is required by karma.conf.js and loads recursively all the .spec and framework files.

angular.json

This is the main file from which angular configuration is loaded. If you see this file it will have reference to all files - mian.ts, indes.html etc. All configuration needed for your angular application to build and run resides here.

NOTE: In previous versions of angular this file was called angular-cli.json.

package.json

As mentioned in node_modules section, package.json is a descriptor file for any node project. It defines project name, it's dependencies etc.

tsconfig.json

This has configurations related to your typescript compiler. Your typescript compiler will look at these settings and converts type script to javascript that the browser understands.

tslint.json

This file has the liniting configuration. Rules that developers must follow to maintain the codebase in a standard way.

.gitignore

This is a file that git understands and whatever you add inside this file will be ignored by git for version control.

Related Links

• Angular Hello World example(OSFG)