Angular file and folder structure | Basic Structure Of Angular Application | Angular 15 Tutorial
Angular file and folder structure | Basic Structure Of Angular Application | Angular 15 Tutorial
Many of us work or create new projects in Angular in our day-to-day lives. Most of us are not aware of what are the files and folders available once we create a new project. Also, what are their purpose and use them? In this blog, we will see the project structure of an Angular application.
dist folder
The "dist" folder is the build folder that has all the files and folders which can be hosted in the server. It has the compiled code of our angular project including .js, .html and .css files.
e2e folder contains
"src" folder
app.e2e-spec file
app.po file
protractor.conf file
tsconfig file
This is the default configuration for the e2e folder created by the Angular CLI. e2e stands for end-to-end and it refers to e2e tests of the website. It is used to track user behavior on the website while testing.
node_modules folder
This folder is generated when we run "npm install" command. This folder contains third-party libraries and files. All these files are bundled in our project together.
Note
We don't need this folder while deploying our application somewhere.
"src" folder has this structure
app folder
Contains "modules" and "components" for our Angular application.
It basically has,
app.component.css - Contains the CSS code for the component.
app.component.html - HTML file pointing to the app component. It is a template for the angular application.
app.component.spec.ts - Unit testing file associated with app component. It can be generated using "ng test" command.
app.component.ts - Entire functional logic is written in this file.
app.module.ts - TypeScript file holds all dependencies. Here we will use "NgModule" and define the Bootstrap component when loading the application.
assets folder
Here we will keep resources such as images, styles, icons, etc.
environments folder
It contains the environment configuration constants that help while building the angular application. It has environment.ts and environment.prod.ts. These configurations are used in angular.json file.
favicon.io
The icon appears in the browser tab of our application.
index.html
Basic HTML file.
main.ts
The starting point of our application. It bootstraps/starts the AppModule from the app.module.ts file.
polyfills.ts
This file is used to compile our TypeScript to specific JavaScript methods. Provides compatibility support for Browser versions.
styles.css
Global CSS file.
tests.ts
It is the main test file. When we run the "ng test" command, this file is taken into consideration.
.browserslistrc file
Browser compatibility and versions are mentioned in this file. This configuration is pointed to in our package.json file.
.editorconfig
This file deals with consistency in code editors to organize some basics such as indentation and whitespaces. More like code formatting.
angular.json
This file defines the structure of our application. It includes settings associated with our application. Also, we can specify the environments on this file. For example, development, production, etc.
karma.conf.js
This is the configuration file for the Karma Test Runner. It is used in Unit Testing.
package.json
This is the npm configuration file. All the dependencies mentioned in this file. We can modify dependency versions as per our need on this file.
package-lock.json
Whenever we change something on the node_modules or package.json, this file will be generated. It is associated with npm.
README.md
This file is created by default. It contains our project description. It shows how to build and which Angular CLI version has been used.
tsconfig.app.json
This configuration file overrides the tsconfig.json file with relevant app-specific configurations.
tsconfig.base.json
This file has been introduced in Angular 10+. It has the same configuration as compared to tsconfig.json file.
tsconfig.json
TypeScript compiler configuration file. This is responsible for compiling TypeScript to JavaScript so that the browser will understand.
tsconfig.spec.json
This file overrides the tsconfig.json file with app-specific unit test configurations while running the "ng test" command.
tslint.json
tslint.json is a static analysis tool. This file keeps track of the TypeScript code for readability, maintainability, and functionality errors.
#Angular15 #angulartraining #allcpl
Watch video Angular file and folder structure | Basic Structure Of Angular Application | Angular 15 Tutorial online without registration, duration hours minute second in high quality. This video was added by user ALLCPL 14 January 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 748 once and liked it 6 people.