In this article, we will learn about the file and folder structure of Angular projects.
So, I actually divided the file and folder structure in the two parts: one is for the beginners and another one is for the whom has the basic idea about the angular and frontend.
If you are a beginner in the angular or you are a fresher in the frontend development, then you just need to focus on the points in the part1.
If you have the basic idea about the angular and frontend, then you can just go with the points in the part2.
We will cover the both of them, but mainly if you are a fresher, then you have to focus on the part1. Let's get in start the first file.
package.json
You will finally find this file on your root folder. This is the first file when you are doing your angular project. The first file which is created for your project.
{
"name": "angular10-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.0",
"@angular/common": "~11.2.0",
"@angular/compiler": "~11.2.0",
"@angular/core": "~11.2.0",
"@angular/forms": "~11.2.0",
"@angular/platform-browser": "~11.2.0",
"@angular/platform-browser-dynamic": "~11.2.0",
"@angular/router": "~11.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.0",
"@angular/cli": "~11.2.0",
"@angular/compiler-cli": "~11.2.0",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
}
}
It has your application name and its version, scripts, dependencies and the dev dependencies ...
One script that we regularly use which is the ng serve.
Dependencies is the core package which is used by the angular and the dev dependencies just simply means you need them when you are developing your application.
node_modules
Keep in mind that you never need to write any kind of code or any files in this folder. Because when the other developer want to use your code and they will use the npm install your code. And the node_modules folder will be generated by the npm install automatically and will delete other things you just write in this folder.
src
95% of our work which is related to the development is done inside the src folder. Some other work like configuration, installation and end-to-end testing are just outside the src folder.
environments
You'll find there are two files in the environments folder which is basically used when you just want to define some different configuration on different environments. So what is the environment means when you are developing your application then you need the development environment. When you are testing your application then you need the testing environment. When you just make your website life then you need the production environment.
Why we need to put the different configuration for the different environments? The reason is let's say you are developing something then it will be on the development server and some API urls, some variables can be different. That's why we will just make the different files for different environments.
assets
When you just want to add some extra things like images, extra CSS or extra scissors from any library then you can put these things inside here.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular10Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
This is the first file which is loading in your project when you run it on the browser. Keep in mind that you never to write any kind of code here, you can just change your title or if you just want to put some favicon.
main.js
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Actually main.js file will make a bridge between your angular code and index.html file. It will load all js files inside the index.html.
You'll see that it will load AppModule, environments etc. So, it have the all major stuff imported.
It will bootstrap your application with the html file.
styles.css
If you want to make some by default style or global style, then you can write it here.
If you want to make a style for a specific code, then you can write the style inside specifically in the components.
app
From the screenshot, you will find it has the module, it has the components and it has the route.
And in the index.html, you will find the
<app-root></app-root>, that simple means it load this component in your application. If we remove it then there is nothing to load from this file.
Now, you may confuse what is the module and what is the components, so in the detail we will learn it in the upcoming articles. But for few words you can say that components are the very small functionalities and modules are basically a collection of your components.
For example:
Let's say I just want to make a complete functionality for the uses, then users is basically your module and use login is one of the component. User sign is the another component. User profile, user setting, user password are the different components.
So far, these are the things that we need to understand at fresher level. And you actually must need to know these files.
editorconfig
Basically, you will find these files on the root folder.
If you are using the sublime or visual studio code or notepad++, then you can just make common configurations like character set, indent style and this kind of things.
So, basically this is only for when you have the advanced level of your expertise in angular and then you can just use it.
karma.config
package.lock.json
It has the old version controlling and dependencies and their dependence is all everything inside the package.lock.json
tslint
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations and formatters.
typescript files
The typescript configuration files specify the root files and the compiler options required to compile the project.
e2e folder
e2e folder is basically used to the end-to-end configurations for testing purpose.
