Introduction To The Files Used In Angular Application

In the previous article, we discussed how to set up a development environment and create a basic Angular application. If you want to know how to create a simple Angular application, you can click on this link "Setup development environment & create Angular application".
 
Now, in this article, we will discuss the files present in your folder after creating a project, in detail.
 
When we run the Angular CLI command "ng new <project_name>" to create Angular application, the CLI installs the necessary Angular npm packages and other dependencies in the root folder. Let's discuss the files one by one that you need to know.
 
Introduction To The Files Used In Angular Application
 

End to End (e2e)

 
When an application grows in size and complexity it becomes unrealistic to depend on manual testing for checking bugs. Unit testing is useful when we want to test a single unit separately. But if we want to check if all the components are working correctly together, then this can't be tested using Unit testing. Here, End-to-End tests are made to check this. 
 
End to End testing is a great way to make sure at a high-level overview that our application functions correctly from a user's perspective or the flow of an application is performing as designed from the start to finish. It uses an existing end-to-end testing framework, protractor. Protractor runs your tests against your application running in a real browser, in the same way, your user may perform the actions.
 

Node Modules

 
The node modules folder is the default folder where all 3rd-party libraries are installed, according to which our application runs. This is used for development purposes. When we run or build our project then only required libraries are put together in a bundle and then deploy into the server. For example: If we install 4 libraries in our project but our project is using only 2 libraries so when we build or run our project then only that 2 required libraries will put together in a bundle & deploy to the server. 
 

Src

 
Src folder contains the main code files related to our application. It contains all the business logic code. We can say that our application's 99% of the code is done under the Src folder.
 
Introduction To The Files Used In Angular Application
  • app
    This folder contains the files needed to create the UI of an application. It contains HTML, CSS, Module & Routing file.
  • assets
    This folder contains all the static files of your application like images, fonts, etc. that are used in your application.
  • environments
    This folder consists of 2 environments files, production & development files. We can do different configuration settings for our different environments. 
  • favicon
    This file contains a small icon also known as a bookmark icon associated with your website.
  • index.html
    Index.html is our main HTML file which contains our Angular application. It didn't contain any reference of CSS or javascript file in it. All references will dynamically insert into this page.
  • main.ts
    Main.ts file is used to tell angular to start our application. It initializes the platform(browser) on which our application runs. 
  • polyfills.ts
    Angular has new features that are written in ES6 and typescript but it's not compatible with Internet Explorer or Firefox. To be viewed or used in these browsers we need some kind of environment setups. So, the polyfills take this task and help to provide compatibility support for old browsers.
  • style.css
    Style.css is used to add global styling in our application. Also, each component has its own styling but the style.css file will override this component level styling.
  • test.ts
    Test.ts file is used to initialize the testing environment in our application.

editorconfig

 
It is used to define and maintain consistency in code editors to organize some basics such as indentation and whitespace. For example, If there are many developers working on the same project in a team so as to work properly, the setting of every developer's editorconfig file should be the same. 
 

gitignore

 
gitignore is used when we deploy our project on a git repository, to tells git that which files it should ignore that aren't useful.
 

angular.json

 
Angular.json is a very important configuration file related to our application. It defines the structure of our application.
 

karma.conf.js

 
karma is a test runner and it has been developed by the Angularjs team. This file specifies the configuration file for the Karma test runner.
 

package.json

 
Package.json contains information about our web application. The main purpose of the file is to contain the information about the npm packages that we have installed for our project.
 

tsconfig.json

 
This is a typescript compiler configuration file. This file contains the settings for the typescript (ts) compiler. So, when the application builds, the typescript compiler looks at the settings in this file and based on these settings, ts compiler compiles the code into javascript, which can be understood by the browser.  
 

tslint.json

 
Tslint is an analysis tool for typescript code. It checks the readability, maintainability, and functionality errors of our typescript code.