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 an 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.

Angular CLI

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 that the flow of an application is performing as designed from 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 only required libraries are put together in a bundle and then deployed 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 those 2 required libraries will be put together in a bundle & deployed to the server.

Src

The 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.

Src folder

app: This folder contains the files needed to create the UI of an application. It contains HTML, CSS, Module & Routing files.
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 environment 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 to CSS or JavaScript files in it. All references will be dynamically inserted 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: The Test.ts file is used to initialize the testing environment in our application.

editor config

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 tell 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 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.