FIles and Folder Structure
This is a continuation article to our previous article. So, please read our previous article before proceeding to this article where we discussed the step-by-step process to create an Angular project using Angular CLI.
Folder Structure
e2e Folder:
e2e stands for end-to-end testing. This is not for testing your application functionality (it is not for unit testing) rather it is used for testing the user behavior when it is deployed on the production server. That means it will monitor who visits your application, which users log in to your application, how much time they stay in your application, how many pages a user visits within your application, when the user logout from your application, etc
node_modules Folder:
This folder contains the packages (folders of the packages) which are installed into your application when you created a project in angular.
The folders from any third-party packages you installed will also be kept in this node_modules folder.
IMP: When deploying your application to a production server or committing to a git repository, you shouldn't include this folder.
You should exclude this folder if you are relocating your project to a different place and instead run npm to install it in the new location.
src Folder:
This is the source folder of our angular application. That means this is the place where we need to put all our application source code. So, every component, service class, modules, everything we need to put in this folder only.
app Folder:
This is the application folder. Whenever you want to create any component, service, or module, you need to create it within this app folder.
By default angular creates one component (app.component.ts) and one module (app.module.ts) and an angular application should have at least one component and one module. There are numerous other files, including HTML, CSS, Sass, and routing modules, in addition to these two.
assets Folder:
This is the folder where you can store the static assets like images, icons, etc.
environments Folder:
This folder is basically used to set up different environments. Here, you can find two files - one for production and one for development
You can use this file to store environment (either production or development environment) specific configuration such as the database credentials or server IP addresses
index.html:
This HTML file contains HTML code with the head and body section.
It is the starting point of your application or you can say that this is where our angular app bootstraps.
If you open it you will find that there are no references to any stylesheet (CSS) nor JS files this is because all dependencies are injected during the build process.
main.ts file:
This is the entry point for our angular application. Just like main method in Java or C or C# application.
polyfills.ts
This file primarily serves as a configuration tool for browsers. Typescript is the language used to write the code for angular. The compiler converts your Typescript code to a specific JavaScript method using the Polyfills.ts file so that it may be read by many browsers.
To start an Angular application, the necessary script has to be loaded into the polyfill.ts file. This is due to the fact that the angular framework uses JavaScript's most recent features, which are not included in the JavaScript version that is currently supported by the majority of browsers. In essence, the polyfills.ts file bridges the gap between the JavaScript functionality available by the most recent browsers and the ones required by Angular. The primary purpose of it is backward compatibility.
.editorconfig file:
The main purpose of this file is to configure the team environment. A single project may have multiple developers working on it in real-time. Additionally, the coding standards that each developer uses to declare variables, classes, styles, the size of each character, length, etc., may vary. But ultimately, to create the finished result, we must combine the code from each developer.
Due to the fact that every developer uses a different set of coding standards, it may therefore result in certain errors or messy code. The editorconfig file is used to address this issue and defines the norms that developers must adhere to when working together. The manager or team lead who establishes the rules is the only person who may see this file; developers do not have access to it. The following rules can be found in the editorconfig file, which you can now open.
If you develop the component against the rule, then your component is not going to be compiled.
.gitignore file:
You must include this gitignore file with the files you want to exclude from the git repository.
angular.json file:
From angular 6, the angular-cli.json file has been replaced by angular.json
This is one of the most important files and it contains all the configuration of your Angular Project. It contains the configurations such as what is the project name, what is the root directory as source folder (src) name which contains all the components, services, directives, pipes, what is the starting point of your angular application (index.html file), What is the starting point of typescript file (main.ts), etc.
browserslist:
This file is currently used by autoprefixer to adjust CSS to support the specified browsers.
test.ts and karma.config.js
These two files are basically used for testing purposes.
The test.ts file is the configuration file of Karma which is used for setting the test environment. Within this file, the tester will write the unit test cases for testing the project.
The karma.config.js file is used to store the setting of karma i.e. test cases. It has a configuration for writing unit tests. Karma is the test runner and it uses jasmine as a framework. Both tester and framework are developed by the angular team for writing unit tests.
package.json:
Every npm project has to have this file. It includes basic project information (name, description, licence, etc.), commands that can be used, dependencies—a list of packages needed for the application to function—and dependencies—again, a list of packages needed for the application only during the development phase,
README.md file:
README is the file that contains the description or description of the project which we would like to give to the end-users so that they can start using our application in a great manner. This file contains the basic documentation for your project, also contains some pre-filled CLI command information.
tsconfig.app.json:
This file is used during the compilation of your application and it contains the configuration information about how your application should be compiled.
tsconfig.json:
This file contains the configurations for typescripts. If there is a tsconfig file in a directory, that means that the directory is a root directory of a typescript project, moreover, it is also used to define different typescript compilation-related options.
tsconfig.spec.json:
This file is used for testing purposes in the node.js environment. It also helps in maintaining the details for testing.
tslint.json:
This is a tool useful for static analysis that checks our TypeScript code for readability, maintainability, and functionality errors. We will see how it works in a further lesson.
Here, in this article, I try to explain the overall Folder Structure of the Angular Application.
